ReactJS多输入表单提交如何获取指定结构的键值对数据？

核心修改点 #

• 1. 修正state中allValues的初始类型：你需要存储键值对结构，所以初始值要从空数组[]改成空对象{}
• 2. 修正changeHandler里的setState逻辑：原来的写法是把表单字段直接放到state根层级，没有存入allValues属性下
• 3. 修正受控输入框的value绑定：不要写死空字符串，要绑定allValues中对应字段的值，否则输入内容无法回显

修改后完整代码 #

state初始化

this.state = {
  allValues: {}, // 从数组改为空对象
};

事件处理函数

changeHandler = (e) => {
  // 先复制原有allValues的内容，再更新对应表单字段
  this.setState({
    allValues: {
      ...this.state.allValues,
      [e.target.name]: e.target.value
    }
  });
};

onsubmit = (e) => {
  e.preventDefault();
  console.log(this.state.allValues); // 此处打印的就是你需要的键值对格式
};

表单代码

<form onSubmit={this.onsubmit}>
  <input 
    type='text' 
    name='bloodsugar' 
    onChange={this.changeHandler} 
    value={this.state.allValues.bloodsugar || ''} // 绑定对应字段值，兜底空字符串避免非受控组件警告
  />

  <input
    type='text'
    name='bloodpressure'
    onChange={this.changeHandler}
    value={this.state.allValues.bloodpressure || ''}
  />

  <button type='submit' style={styles.subbtn}>
    Submit
  </button>
</form>

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