onChange react事件调用带有参数但未传递参数的函数吗？

Question

我不清楚该问题的标题。我的问题是比实际问题更基本的理解水平。我是新来的反应。我在下面的行中不了解此组件功能：

<input type='text' name='myinput' value={this.state.input} onChange = {this.handleChange.bind(this)} />

此handleChange函数被调用具有事件参数，但是事件是什么？事件更多只是一个反应关键字，然后传递了实际参数？我不明白？

完整组件：

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ""
    };
    // change code below this line
    this.handleChange = this.handleChange.bind(this);
    // change code above this line
  }
  // change code below this line
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  // change code above this line
  render() {
    return (
      <div>
        {/* change code below this line */}
        <input
          type="text"
          name="myinput"
          value={this.state.input}
          onChange={this.handleChange.bind(this)}
        />
        {/* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
}

我想如果有人可以分解一下它对我的作用？逻辑上我不明白吗？

Answer 1

onChange函数中接收的事件只是发生更改时浏览器发送的本地事件。

基本上是一个对象，它包含有关刚刚发生的thing的一些信息。在这种情况下，target属性包含<input />元素。因此，访问event.target.value将为您提供输入元素的值。

此外，它还包含其他数据/功能，可用于操纵浏览器如何处理发生的事情。例如，您可以使用preventDefault()阻止分派事件时可能发生的默认行为。就像在提交表单时一样，您可能想阻止默认行为自己处理提交逻辑。

您可以在此处阅读有关Event界面的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Event

关于更改事件：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

---

而且，在构造函数中，您已经将this绑定到该函数，因此您无需再次执行此操作。 onChange={this.handleChange}应该可以正常工作。