Question

我有一个表单与许多输入组件做出反应。我不喜欢我必须为我构建的每个输入组件编写一个新的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

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

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

Answer 2

您可以尝试event delegation，就像传统方式一样。

也就是说，只需将一个函数绑定到父form元素，并侦听从子input元素中冒出的所有事件。

如何避免重复事件监听器的反应？

2 个答案: