本文介绍在 react 函数组件中，利用 usestate 管理状态、通过复选框（checkbox）的选中状态动态控制按钮可见性的标准实践，避免直接操作 dom，确保状态驱动 ui 更新。
本文介绍在 react 函数组件中，利用 usestate 管理状态、通过复选框（checkbox）的选中状态动态控制按钮可见性的标准实践，避免直接操作 dom，确保状态驱动 ui 更新。
在 React 中，UI 应始终由状态（state）驱动，而非手动修改 DOM 属性（如 visibility 或 display）。原代码中存在多个关键问题：
- ❌ 错误地混合使用 useState 与 document.getElementById + setAttribute，破坏了 React 的声明式渲染机制；
- ❌ check.addEventListener('click', showContinueButton()) 中多写了括号 ()，导致函数立即执行而非绑定事件；
- ❌ visibility 并非合法的 HTML 元素属性（应使用 CSS 的 visibility 样式或更推荐的条件渲染）；
- ❌ showContinueButton 逻辑依赖过时的 visible 值（闭包中捕获的是初始值），且未响应式更新。
✅ 正确做法是：用 checkbox 的 checked 属性值直接更新 state，并通过逻辑运算符（如 &&）实现条件渲染。以下是简洁、可靠、符合 React 最佳实践的实现：
import { useState } from 'react';
function MyForm() {
const [isVisible, setIsVisible] = useState(false);
const handleCheckboxChange = (e) => {
setIsVisible(e.target.checked);
};
return (
<div>
<label>
<input
type="checkbox"
checked={isVisible}
onChange={handleCheckboxChange}
/>
我已阅读并同意条款
</label>
<br /><br />
{isVisible && (
<button id="continue">继续</button>
)}
</div>
);
}
export default MyForm;? 关键要点说明：
- 使用 onChange 而非 onClick 监听 checkbox —— 它能准确捕获状态变更（包括键盘操作、无障碍访问等），语义更准确；
- 将 checked 属性显式绑定到 state（受控组件），保证组件状态与 UI 同步；
- 利用 {isVisible &&
- 避免 document.getElementById 和 setAttribute —— 这类命令式操作易引发状态不一致、难以调试，且在服务端渲染（SSR）或严格模式下可能报错。
? 进阶提示：
若需保留按钮 DOM 结构但仅隐藏视觉表现（例如保持布局占位），可改用内联样式：
<button style={{ visibility: isVisible ? 'visible' : 'hidden' }}>继续</button>但绝大多数场景下，推荐优先使用条件渲染（&&），语义清晰、性能更优、符合 React 设计哲学。
总结：React 的核心是“状态即真理”。让 checkbox 控制一个布尔 state，再让该 state 决定 UI 是否出现——简单、健壮、可维护。
