React表单：为何复选框需单独处理？无法获取选中状态的问题

核心原因是HTML原生输入控件的行为逻辑差异，文本输入（如email、password）和复选框的状态存储、受控绑定方式本质不同，所以React里处理它们必须区分开：

1. 状态值的来源不一样 #

文本类输入的当前内容存在event.target.value中，而复选框的核心状态是「是否选中」，对应event.target.checked（布尔值）。复选框的value属性是表单提交时的附加提交值（比如设置value="remember"，选中时表单会提交check=remember），和「选中状态」完全是两回事。

2. 受控组件的绑定属性不同 #

实现React受控组件时，文本输入用value属性绑定状态来同步内容，而复选框必须用checked属性绑定状态——这是HTML原生规则决定的，复选框的选中状态只由checked属性控制，value无法影响它的选中状态。

正确的统一处理方式 #

不需要写两套逻辑，只需要在handleChange里根据输入类型判断取值即可，同时修正复选框的绑定属性：

function Login() {
  // 初始化时给所有字段设置默认值，避免undefined导致的渲染警告
  const [inputs, setInputs] = useState({
    mail: "",
    pass: "",
    check: false
  });

  const handleChange = (event) => {
    const { name, type, value, checked } = event.target;
    // 根据输入类型选择对应的状态值
    const inputValue = type === "checkbox" ? checked : value;
    setInputs(prevState => ({
      ...prevState,
      [name]: inputValue
    }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(inputs);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="email" 
        name="mail" 
        value={inputs.mail} 
        onChange={handleChange}
      />
      <input 
        type="password" 
        name="pass" 
        value={inputs.pass} 
        onChange={handleChange}
      />
      <div>
        <input 
          type="checkbox" 
          name="check" 
          checked={inputs.check} {/* 这里用checked绑定状态，不是value */}
          onChange={handleChange}
        />
        <label>Remember me</label>
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}
export default Login;

你之前的尝试里混着用value和checked，虽然能临时运行，但不符合受控组件的规范，容易出现状态不同步的隐藏问题——比如手动修改value不会改变复选框的选中状态，逻辑上完全不通。

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