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

【问题标题】：argument automatically generated on onChange event handleronChange 事件处理程序上自动生成的参数
【发布时间】：2018-03-06 05:16:41
【问题描述】：

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

{target} 如何成为handleChange 的参数？将目标发送到事件处理程序是onChange 的默认行为吗？
为什么必须使用{target}？为什么不能简单地使用target？这是ES6 中destructuring 功能的示例吗？

自我注意：属性名称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
  });
}

【问题讨论】：

标签： reactjs destructuring

【解决方案1】：

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

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

是的，这是解构功能的一个示例。您正在解构 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
  });
}

【讨论】：

【解决方案2】：

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

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

这里你使用的是 ES6 的解构特性，target = event.target

【讨论】：