如何使用Reactstrap实现根据复选框状态动态启用/禁用输入框

问题原因 #

• 没有使用React状态存储复选框的勾选状态：普通JS变量修改不会触发组件重渲染，视图无法同步更新
• 条件判断逻辑错误：原代码中if ((e) => e.target.checked === true)是直接判断箭头函数对象本身，所有非空函数都为真值，逻辑永远走第一个分支
• 复选框的onChange事件仅打印日志，没有修改状态触发视图更新的逻辑

可运行的修正代码 #

import React, { useState } from "react";
import {
    Input,
    FormGroup,
    Label,
  } from "reactstrap";

function HelloWorld() {
  // 声明状态存储复选框勾选状态，默认未勾选
  const [isChecked, setIsChecked] = useState(false);

   return (
   <FormGroup check>
       <Label check>
           <Input 
             type="checkbox" 
             id="mpCheckbox" 
             checked={isChecked}
             onChange={(e) => setIsChecked(e.target.checked)} 
           />
           <Label for="pmInput">Input Field</Label>
           <Input 
             type="text" 
             name="pmInput" 
             id="pmInput"
             disabled={!isChecked} 
           />
       </Label>
   </FormGroup>
   )
}
export default HelloWorld;

改动说明 #

• 引入React的useState Hook管理复选框的勾选状态，状态变化时会自动触发组件重渲染，同步更新视图
• 给复选框绑定checked属性关联状态，使其成为受控组件，状态和视图保持一致
• 复选框onChange事件触发时更新状态值
• 输入框的disabled属性直接绑定!isChecked，勾选时isChecked为true，disabled为false，输入框启用；未勾选时相反，自动禁用

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