当需要处理多个受控输入元素时，可以为每个元素添加一个 name 属性，让处理函数根据 的值选择要执行的操作event.target.name。

例如：

handleInputChange(event) {
  const target = event.target;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const name = target.name;

 this.setState({
  [name]: value
 });
 }

render() {
return (
  <form>
    <label>
      value1:
      <input
        name="value1"
        type="checkbox"
        checked={this.state.value1}
        onChange={this.handleInputChange} />
    </label>
    <br />
    <label>
      value2:
      <input
        name="value2"
        type="number"
        value={this.state.value2}
        onChange={this.handleInputChange} />
    </label>
    <br />
    <label>
      value3:
      <input
        name="value3"
        type="text"
        value={this.state.value3}
        onChange={this.handleInputChange} />
    </label>
  </form>
 );
}
}

如果您将 a 添加name到 ，则input可以在事件之外使用它。

handleChange1(event) {
    const {name, value} = event.target
    this.setState({[name]: value});
}

<input name="inputone" type="text" value={this.state.value1} onChange={this.handleChange1} />
<input name="inputtwo" type="text" value={this.state.value2} onChange={this.handleChange2} />
<input name="inputthree" type="text" value={this.state.value3} onChange={this.handleChange3} />

您可以简单地使用input name：

代码：

import React from "react";
import "./styles.css";

class MyComponent extends React.Component {
  state = {
    value1: "",
    value2: "",
    value3: ""
  };
  handleChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  };
  render() {
    console.log(this.state);
    return (
      <>
        <input
          name="value1"
          value={this.state.value1}
          type="text"
          value={this.state.value1}
          onChange={this.handleChange}
        />
        <input
          name="value2"
          value={this.state.value2}
          type="text"
          value={this.state.value2}
          onChange={this.handleChange}
        />
        <input
          name="value3"
          value={this.state.value3}
          type="text"
          value={this.state.value3}
          onChange={this.handleChange}
        />
      </>
    );
  }
}

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <MyComponent />
    </div>
  );
}

演示：https : //codesandbox.io/s/beautiful-brook-p46zs?file=/src/ App.js: 0-1092

我总是通过 switch case 来做到这一点

 handleChange(event) {
            switch (event.target.name) {
                case 'name1':
                    this.setState({ name1: event.target.value });
                    break;
                case 'name2':
                    this.setState({ name2: event.target.value });
                    break;
                 case 'name3':
                    this.setState({ name3: event.target.value });
                    break;
                default:
                    break;
            }
    }


<input type="text" name="name1" value={this.state.value1} onChange={this.handleChange1} />
  <input type="text" name="name2" value={this.state.value2} onChange={this.handleChange2} />
  <input type="text" name="name3" value={this.state.value3} onChange={this.handleChange3} />