点击按钮时无法打开TextField的问题求助

核心问题 #

你的代码存在三个关键问题导致文本框无法正常显示：

1. 状态切换逻辑错误：使用setIsOpen(!isOpen)会让状态在true/false间来回切换——第一次点"Yes"打开文本框，第二次点"Yes"反而关闭，此时即便choice.toggle是"Yes"，isOpen为false也会让文本框隐藏。
2. 条件判断冗余且耦合：渲染文本框时同时判断isOpen和choice.toggle === 'Yes'，但isOpen状态没有和当前选中的选项绑定，逻辑混乱。
3. 事件冲突：label的onClick和radio的onChange会同时触发，可能导致状态被重复修改。

修复方案（推荐第一种） #

方案1：用选中的选项值替代布尔状态

这种方式逻辑更直观，直接跟踪当前选中的toggle值：

1. 替换状态定义：

// 替换原有的isOpen状态
const [selectedToggle, setSelectedToggle] = useState(null);

2. 修改选中处理逻辑：

const handleSelect = (choice) => {
  console.log(choice.toggle);
  setSelectedToggle(choice.toggle);
};

3. 调整渲染代码（移除label的onClick，改用radio的onChange）：

<label className="toggle-button">
  <input 
    className="toggle-button__state" 
    type="radio" 
    name="choice" 
    value={choice.question_choices}
    onChange={() => handleSelect(choice)} 
  />
  <span className="toggle-button__text">{choice.toggle}</span>
</label>

{selectedToggle === 'Yes' && (
  <input 
    type="text" 
    style={{height: '200px', width: '200px'}} 
    name="text-field" 
  />
)}

方案2：调整布尔状态的切换逻辑

如果坚持使用isOpen布尔状态，需要确保状态和选中选项关联：

1. 修改处理函数：

const handleClick = (choice) => {
  console.log(choice.toggle);
  if (choice.toggle === 'Yes') {
    console.log('Open');
    setIsOpen(true); // 直接设为true，不再取反
  } else {
    setIsOpen(false); // 点击其他选项时关闭文本框
  }
};

2. 简化渲染条件：

{isOpen && (
  <input 
    type="text" 
    style={{height: '200px', width: '200px'}} 
    name="text-field" 
  />
)}

同样建议移除label的onClick，将逻辑放到radio的onChange中，避免事件重复触发。

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