React受控表单：复选框与文件输入的事件处理属性咨询

我当初刚接触受控表单的时候也被这俩类型搞懵过！别担心，这就给你讲清楚怎么处理：

Checkbox 类型 Input #

Checkbox 的核心状态是「是否被勾选」，对应的是布尔值，所以我们不用 event.target.value，而是用 event.target.checked 来获取状态，再通过 checked 属性绑定到组件状态上，实现受控。

举个 React 示例：

import { useState } from 'react';

function CheckboxDemo() {
  // 用布尔值存勾选状态
  const [isChecked, setIsChecked] = useState(false);

  const handleCheckboxChange = (e) => {
    // 这里取 e.target.checked 更新状态
    setIsChecked(e.target.checked);
  };

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={isChecked} // 绑定状态
          onChange={handleCheckboxChange}
        />
        同意用户协议
      </label>
      <p>当前状态：{isChecked ? '已勾选' : '未勾选'}</p>
    </div>
  );
}

File 类型 Input #

File 类型比较特殊——浏览器出于安全限制，不允许我们通过 value 属性直接设置它的选中值，所以它没法像 text/checkbox 那样实现「完全受控」，但我们依然可以在 onChange 事件中获取选中的文件，把文件信息存到组件状态里，实现半受控的逻辑。

在 onChange 事件里，我们要取 event.target.files，这是一个 FileList 对象，你可以通过索引（比如 files[0]）获取单个选中的文件（如果允许多选的话，就遍历整个 FileList）。

示例代码：

import { useState } from 'react';

function FileUploadDemo() {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (e) => {
    // 获取第一个选中的文件
    const file = e.target.files[0];
    if (file) {
      setSelectedFile(file);
    }
  };

  return (
    <div>
      <input
        type="file"
        onChange={handleFileChange}
      />
      {selectedFile && (
        <p>已选择文件：{selectedFile.name}</p>
      )}
    </div>
  );
}

如果需要支持多选，只需要给 input 加上 multiple 属性，然后在 onChange 里处理整个 FileList 即可。

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