React.js如何根据checkbox勾选状态动态禁用文本输入框

问题根因 #

• 你给复选框组件硬编码了固定的value="true"，不管勾选还是取消勾选，事件对象里的e.target.value永远是字符串"true"，导致判断逻辑永远走设置禁用的分支，输入框一直保持禁用状态
• 复选框的选中状态应该通过e.target.checked属性读取，value是表单提交时携带的字段值，和是否选中没有关联

修复步骤 #

1. 修改disable2函数的逻辑，改用e.target.checked判断选中状态，修正后的代码如下：

const disable2 = (e) => {
  const isAutoAssign = e.target.checked
  setAaaa(isAutoAssign)
  setBbbb(isAutoAssign)
}

2. 建议给CInputCheckbox组件补充checked属性和状态绑定，避免出现组件状态和React状态不一致的问题，修改后的组件代码如下：

<CInputCheckbox 
  id="checkbox1" 
  name="checkbox1" 
  onChange={e => disable2(e)} 
  checked={aaaa}
/>

修改完成后即可实现预期效果：勾选复选框时序列号输入框禁用，取消勾选时输入框恢复可输入状态。

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