React中如何用一个事件处理器处理含文件字段的多个输入字段？

你之前的代码问题在于文件输入字段不能用e.target.value获取实际文件，e.target.value返回的只是浏览器对文件路径的安全字符串，不是文件本身。正确的做法是通过e.target.files[0]获取选中的单个文件（如果允许多选则取files数组）。

修改你的事件处理器，增加对输入类型的判断即可兼容所有输入：

const changeHandler = (e) => {
  const { name, type, files, value } = e.target;
  // 根据输入类型区分取值逻辑
  const inputValue = type === 'file' ? files[0] : value;
  setInputs(prev => ({
    ...prev,
    [name]: inputValue
  }));
};

这样不管是文本输入还是文件输入，都能正确存入inputs状态。

后续处理FormData时，直接把对应字段的值追加进去即可，文件类型的值会被FormData自动识别处理：

const { name, email, avatar } = inputs;
const formData = new FormData();
formData.append('name', name);
formData.append('email', email);
// 存在文件时才追加，避免空值
if (avatar) {
  formData.append('avatar', avatar);
}

记得给文件输入框设置对应的name属性，比如：

<input type="file" name="avatar" onChange={changeHandler} />

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