Question

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

{target}如何成为handleChange的参数？是onChange将目标发送到事件处理程序的默认行为吗？
为什么有必要使用{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

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

Answer 2

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

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

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

在onChange事件处理程序

2 个答案: