javascript - 为什么 ES6 ComputedPropertyName 不适用于此 react js 代码？

Question

使用 react 16.9.0。

我试图理解为什么以下无法更新组件 state 的 title 属性:

this.setState({
  [formControlName]: event.target.value
});

但是这样做:

this.setState({
  title: event.target.value
});

考虑组件:

export class BookForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { ...props.book };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    const formControlName = event.target.attributes['name'];

    // The following correctly logs "title"
    console.log(formControlName);

    // This does not work
    this.setState({
      [formControlName]: event.target.value
    });

    // This works, why?
    this.setState({
      title: event.target.value
    });
  }

  handleSubmit(event) {
    console.log('Form submitted...');
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label> Title:
          <input type="text" name="title" value={this.state.title} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

BookForm 是这样使用的:

<BookForm book={this.props.book}/>

一本书可能是这样的:

{
  author: "Marijn Haverbeke"
  description: "JavaScript lies at the heart of almost every modern web application, from social apps to the newest browser-based games. Though simple for beginners to pick up and play with, JavaScript is a flexible, complex language that you can use to build full-scale applications."
 isbn: "9781593275846"
 pages: 472
 published: "2014-12-14T00:00:00.000Z"
 publisher: "No Starch Press"
 subtitle: "A Modern Introduction to Programming"
 title: "Eloquent JavaScript, Second Edition"
 website: "http://eloquentjavascript.net/"
}

Answer 1

控制台有点欺骗你。问题出在这里:

const formControlName = event.target.attributes['name'];

获取 name 属性的 Attribute 节点，而不是其value。我想当您记录它时，它会以一种看起来像是字符串的方式向您显示属性节点。 attributes property是 NamedNodeMap元素的属性。按名称对其进行索引可为您提供 Attr instance .将 Attr 实例转换为字符串(对我而言，在 Chrome 上)会生成字符串 "[object Attr]"，因此您可能正在将具有该名称的属性添加到您的状态对象。 :-)

相反，只需使用 reflected 属性，它会为您提供字符串值:

const formControlName = event.target.name;

为了完整性:您还可以使用 event.target.getAttribute("name") 或 event.target.attributes['name'].nodeValue，但是简单而惯用的方法是使用反射属性。