javascript - 如何避免 react 中重复的事件监听器？

Question

我有一个与许多输入组件 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")}
            />

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

Answer 1

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

  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'));