Question

我最近发现了一些东西，但是我不确定为什么它能起作用。在制作React组件时，我曾经这样做：

class App extends React.Component {
  state = {
    input: ''
  }

  onChangeHandler = event => {
    this.setState({input: event.target.value});
  }

  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <input value={this.state.input} onChange={(event) => this.onChangeHandler(event)} />
      </div>
    );
  }
}

我知道这是每次重新渲染时都会创建一个新功能。所以我记得在某处读过，这也可行：

class App extends React.Component {
    state = {
      input: ''
    }

  onChangeHandler = event => {
    this.setState({ input: event.target.value });
  }

  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <input value={this.state.input} onChange={this.onChangeHandler} />
      </div>
    );
  }
}

我现在正在使用后者，因为它不会为每次重新渲染创建新功能。问题是，它如何工作？如果我没有在输入标签的onChange属性中将其作为参数传递给事件，该事件如何到达处理程序？我只是通过参考。

对不起，如果有人问我，我没有运气来寻找答案。

谢谢！

Answer 1

当您说<input onChange={this.onChangeHandler} />时，您所做的只是定义触发onChange事件时要调用的函数。 React将调用此函数并将其传递给SyntheticEvent（有关文档页面here的更多信息）。

因此，需要访问事件数据的所有事情就是确保您赋予onChange属性的任何函数都将事件作为其第一个参数。请注意，在您的两个示例中，您都是这样做的。

反应：为什么不将参数传递给处理程序？

1 个答案: