javascript - 如何为多种表单编写一个handleSubmit函数来setState

Question

我正在尝试编写一个可以更改多种表单状态的handlesubmit 函数。我在检索输入值并在我的 handlesubmit 函数中使用它时遇到问题。另外，当我尝试设置状态时，这些值从表中消失。

    handleSubmit = (event) => {
        event.preventDefault();
        let value = this.element.value;
        this.setState({[event.target.id]: value});
    }

   <td>
   {this.state.benchMax}
   </td>
   <td>
   {this.state.ohpMax}
   </td>

<td>
<form id="benchMax" onSubmit={this.handleSubmit}>
<input type="number" ref={el => this.element = el}></input>
<input type="submit" value="Update!"></input>
</form>
</td>
<td>
<form id="ohpMax" onSubmit={this.handleSubmit}>
<input type="number" ref={el => this.element = el}></input>
<input type="submit" value="Update!"></input>
</form>
</td>

结果不会显示在表格中，并且不会跟踪更改。

Answer 1

HandleChange 函数，

handleChange = event => {
    let value = event.target.value;
    this.setState({[event.target.name]: value})

    event.preventDefault()
    event.stopPropagation()
}

处理提交，

handleSubmit = (event) => {

  //Your code to read values....

  event.preventDefault()
  event.stopPropagation()
}

在input内调用handleChange

<input type="number"  name="name1" value={this.state.name1} onChange={this.handleChange} />