React中如何获取表单所有值？是否必须指定checkbox类型？

你当前通过判断e.target.type === 'checkbox'来处理复选框取值的做法是正确且必要的，原因在于不同表单控件的取值属性本身就存在差异：

• 文本输入框、下拉选择器这类控件，取值依赖e.target.value
• 复选框的核心是选中状态，对应属性是e.target.checked，而非value（复选框默认value为字符串"on"，无法满足你需要的布尔值状态）

如果想简化代码，不用在 onChange 逻辑里直接写判断，可以封装一个统一的取值工具函数，把类型判断逻辑抽离：

const getInputValue = (target) => {
  if (target.type === 'checkbox') {
    return target.checked;
  }
  // 可扩展处理单选框、数字输入框等其他类型
  return target.value;
};

之后在事件处理中直接调用：

const handleChange = (e) => {
  const { name } = e.target;
  setState(prev => ({
    ...prev,
    [name]: getInputValue(e.target)
  }));
};

这种方式只是让代码更整洁，但本质上还是基于控件类型做了区分——这是原生React处理表单的常规操作。

如果想彻底省去手动判断的步骤，可以借助Formik、React Hook Form这类成熟的表单库，它们已经封装好了不同控件的取值逻辑，能直接帮你完成状态同步。

你的最终状态输出{username: "Mike", lastname: "Brown", accept: true}是符合业务预期的，文本字段存字符串、复选框存布尔值的结构也很合理。

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