React.js多输入表单处理：提交时仅能获取单个输入值该如何解决？

核心问题原因 #

你在handleInputs中更新formData状态时直接覆盖了整个对象，没有保留原有字段，导致每次输入后仅保留最后修改的单个字段值。

修复步骤 #

1. 修正输入监听函数 #

更新state时使用扩展运算符保留formData原有字段，推荐使用函数式更新避免异步更新导致的旧值问题：

handleInputs = (e) => {
  // 函数式更新拿到最新的state
  this.setState(prevState => ({
    formData: {
      ...prevState.formData, // 展开原有所有字段
      [e.target.name]: e.target.value // 覆盖当前修改的字段
    }
  }));
}

2. 检查表单输入项配置 #

确保所有6个输入框的name属性和formData中定义的key完全一致，示例：

<input name="org_name" value={this.state.formData.org_name} onChange={this.handleInputs} />
<input name="org_code" value={this.state.formData.org_code} onChange={this.handleInputs} />
<!-- 其余4个字段同理，name要和org_type、org_category等完全匹配 -->

3. 修复提交函数的语法问题 #

你当前的updateOrganization函数中const org_id=定义后没有赋值，更新接口通常需要传递待更新的机构ID，可根据实际需求补充：

updateOrganization = async(e) => {
  e.preventDefault();
  // 补充org_id赋值，比如从路由参数、state.organization中取值
  const org_id = this.state.organization.id; 
  // 提交时把org_id也带入请求参数中
  const res = await axios.put('http://localhost:8000/api/update_organization', {
    ...this.state.formData,
    org_id
  });
}

完成以上修改后即可正常提交所有6个字段的表单值。

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