React中如何根据复选框选中状态控制目标复选框的显示隐藏

你现在的代码不生效，核心是显隐控制属性不匹配：你给目标元素初始设置的是display: none，但JS逻辑里修改的是visibility属性，两个属性的控制逻辑完全独立，修改visibility自然不会生效。

以下是两种可行的实现方案：

方案1：直接修改现有原生DOM操作逻辑 #

只需要调整showHide函数的控制属性，同时补充取消选中时的隐藏逻辑即可：

const showHide = (e) => {
  const targetEl = document.getElementById("hiddenField");
  if (e.target.checked) {
    targetEl.style.display = "block";
  } else {
    targetEl.style.display = "none";
  }
}

如果你的业务场景需要隐藏时元素仍占据原有位置，就把初始元素的style改成visibility: hidden，对应JS里修改visibility属性为visible/hidden即可。

方案2：更适合React框架的状态控制方案 #

从你的代码写法来看应该是在React项目中使用了Ant Design组件，直接操作DOM不符合React的设计规范，更推荐用状态驱动渲染的方式实现：

1. 首先在组件内声明控制显隐的状态

import { useState } from 'react';

// 组件内部
const [showHiddenCheckbox, setShowHiddenCheckbox] = useState(false);

2. 给触发用的复选框绑定onChange事件修改状态

<Checkbox onChange={(e) => setShowHiddenCheckbox(e.target.checked)}>触发选项</Checkbox>

3. 直接用状态控制目标元素的显隐，不需要额外加id

// 写法1：控制display属性，隐藏时元素的dom节点仍保留
<Form.Item style={{ display: showHiddenCheckbox ? "block" : "none" }}>
  <Checkbox></Checkbox>
</Form.Item>

// 写法2：条件渲染，隐藏时直接不生成对应dom节点，性能更好
{showHiddenCheckbox && (
  <Form.Item>
    <Checkbox></Checkbox>
  </Form.Item>
)}

内容的提问来源于stack exchange，提问作者deep shah