onChange 反应事件调用带有参数但没有传递参数的函数？答案

【问题标题】：onChange react event calls function with parameters but no arguments passed?onChange 反应事件调用带有参数但没有传递参数的函数？
【发布时间】：2020-01-27 14:58:22
【问题描述】：

我不太清楚这个问题的标题是什么。我的问题是一个更基本的理解水平，而不是一个实际问题。我是新来的反应。看不懂下面这个组件功能就行了：

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

我想是否有人可以分解这对我来说是如何工作的？逻辑上我不明白？

【问题讨论】：

标签： reactjs components jsx

【解决方案1】：

您在onChange 函数中收到的事件只是发生更改时浏览器发送的本机事件。

它基本上是一个对象，其中包含有关刚刚发生的事物的一些信息。在这种情况下，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} 应该可以正常工作。

【讨论】：