使用 e.target.name setState 意外标记

Question

我的 onChange 处理程序获得了意外的令牌，我想使用 e.target.name ，我希望它是关键字，有什么问题吗？

onChange = e => {
    this.setState({
        e.target.name: e.target.value //error here
    })
  }

  render() {
    return (
      <section>
        <input type="text" name="keyword" value={this.state.keyword} onChange={() => this.onChange} />
</section>
)
}

Answer 1

如果您想使用计算属性名称，语法如下：

onChange = e => {
    this.setState({
        [e.target.name]: e.target.value
    })
  }

  render() {
    return (
      <section>
        <input type="text" name="keyword" value={this.state.keyword} onChange={this.onChange} />
</section>
)
}

此外，您不需要onChange在匿名函数中传递函数。只需将其传递给onChangeprop 即可引用它。