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

Question

我在 Whosebug 上找到了下面的 handleChange "Event Handler" 代码并使用了它。一切正常。关于这个handleChange"Event Handler"，我的问题是：

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

Answer 1

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

写作onChange={ event => this.handleChange(event) }

是shorthand

是的，这是解构特征的一个例子。您正在解构 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

How does {target} become an argument of handleChange? Is it default behavior of onChange to send the target to the event handler? No target is not default argument to onChange, event is.

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

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

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

argument automatically generated on onChange event handler

destructuring

reactjs