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

和

值

是从

输入

组件获得的

这是一个演示：和完整的代码：

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

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
input1:null，
input2:null
};
this.handleChange=this.handleChange.bind（this）；
}
handleChange（id、值）{
这是我的国家({
[id]：值
});
}
render（）{
返回(
请参阅父项中的input1:{this.state.input1}

请参阅父项中的input2:{this.state.input2}

);
}
}
类输入扩展了React.Component{
构造函数（）{
超级（）；
此.state={
用户输入：null
};
this.handleChange=this.handleChange.bind（this）；
}
手变（活动）{
常量enteredText=event.target.valuel
这是我的国家({
用户输入：enteredText
}，this.props.changeHandler（this.props.id，enteredText））；
}
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'app'））；

Ankit，你想让我对答案做些什么，还是它给了你解决方案？这就是我一直在寻找的。我在2020年的答案：使用Vue！