javascript - 如何避免重复的事件侦听器使用react？

我有一个与许多输入组件反应的表格。我不喜欢我必须为我构建的每个输入组件编写一个新的onChange处理程序方法。所以我想知道如何停止重复的代码。

            <Input
              label={"Blog Name"}
              hint={"e.g. 'The Blog'"}
              type={"text"}
              value={this.state.name}
              onChange={this.handleInputChange.bind(this, "name")}
            />

            <Input
              label={"Blog Description"}
              hint={"e.g. 'The Blog Description'"}
              type={"text"}
              value={this.state.desc}
              onChange={this.handleInputChange.bind(this, "desc")}
            />

因此，我没有重复编写新函数，而是重用了相同的函数并传递了额外的值。这是正确的方法吗？其他有经验的人如何解决这个问题。

最佳答案

如果希望父组件使用“输入”子组件中存在的每个输入字段的值来维护状态，则可以通过以下方式使用单个更改处理程序来实现此目的：

  handleChange(id, value) {
    this.setState({
      [id]: value
    });
  }

其中id和value是从Input组件获得的。

这是一个演示：http://codepen.io/PiotrBerebecki/pen/rrJXjK和完整代码：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      input1: null,
      input2: null
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(id, value) {
    this.setState({
      [id]: value
    });
  }

  render() {
    return (
      <div>
        <Input id="input1"
               changeHandler={this.handleChange} />
        <Input id="input2"
               changeHandler={this.handleChange} />
        <p>See input1 in parent: {this.state.input1}</p>
        <p>See input2 in parent: {this.state.input2}</p>
      </div>
    );
  }
}

class Input extends React.Component {
  constructor() {
    super();
    this.state = {
      userInput: null
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const enteredText = event.target.valuel
    this.setState({
      userInput: enteredText
    }, this.props.changeHandler(this.props.id, enteredText));
  }

  render() {
    return (
      <input type="text"
             placeholder="input1 here..."
             value={this.state.userInput}
             onChange={this.handleChange} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));