在onChange事件处理程序上自动生成的参数

Question

我在StackOverflow上找到了下面的handleChange“事件处理程序”代码并使用它。一切正常。关于这个handleChange“事件处理程序”，我的问题是：

1. {target}如何成为handleChange的论据？ onChange的默认行为是将目标发送到事件处理程序吗？
2. 为什么有必要使用{target}？为什么不能简单地使用target？这是destructuring中ES6功能的一个例子吗？

自我注意：属性名称target.name周围的方括号[]是ES6中的一个新功能，称为computed property names

---

构造函数

this.state = {
  username: "",
};

给予

username: <input type="text" name="username" value={ this.state.username} onChange={ this.handleChange } />

事件处理程序

handleChange = ({ target }) => {
  this.setState({
    [target.name]: target.value
  });
}

Answer 1

1. target是event物体上的财产。通过像这样设置onClick处理程序，onChange={ this.handleChange }会自动将事件对象作为参数传递给handleChange方法。

它是写onChange={ event => this.handleChange(event) }的简写

2. 是的，这是解构功能的一个例子。您正在解构event参数以提取target属性。

handleChange = ({ target }) => {
  this.setState({
    [target.name]: target.value
  });
}

// could also be written as

handleChange = (event) => {
  this.setState({
    [event.target.name]: event.target.value
  });
}

// or

handleChange = (event) => {
  const { target } = event;
  this.setState({
    [target.name]: target.value
  });
}

Answer 2

{target}如何成为handleChange的参数？将目标发送到事件处理程序是onChange的默认行为吗？没有目标不是onChange的默认参数，事件是。

handleChange = ({ target }) => {
  this.setState({
    [target.name]: target.value
  });
}

在这里，您使用的是ES6的解构功能，target = event.target