Question

有人可以在功能下方逐行解释我吗

handleChange(e) {
          let fields = this.state.fields;
          fields[e.target.name] = e.target.value;
          this.setState({
            fields
          });

以我的理解

我们正在创建变量字段，并将字段的当前状态存储在变量中，因为我们无法将状态静音。
我不了解fields[e.target.name] = e.target.value;
更新字段

有人可以逐行向我解释以上功能吗？

Answer 1

fields [e.target.name] （此字段也用于访问对象属性）。

var obj = {name:'abc', color:'red'}
console.log(obj.name) // this print 'abc'
console.log(obj['name']) // also print 'abc'

使用obj ['xxx']语法，您可以动态读取对象并为其设置属性。参考https://www.w3schools.com/js/js_objects.asp

因此，在您遇到的问题中， fields 变量采用了本地状态下的现有fields对象。并且在每个事件中，它使用该事件目标名称创建新属性，并将该事件目标值添加为该新属性值。如果该属性名称已存在于 fields 对象中，则仅修改该属性的值。

所以在您的列表中，

是正确的。使用 letfields = this.state.fields; ，它会将以前存储的值存储到 fields 变量中。不会丢失以前的数据
这就是我上面解释的
您的答案是正确的。使用新旧值更新状态

Answer 2

此代码使您可以使用对象表示法在组件状态中动态更改字段的值。 object[]

通过使用fields[event.target.name]，您将在组件状态下查找与导致事件发生的元素名称匹配的字段。然后看起来您正在使用event.target.value

更新该字段的值

为什么这样有用

比方说，您有一个要从用户检索多个输入的组件。没有对象符号，您可能最终会写出非常重复的代码，例如为每个输入编写不同的事件处理程序，以便确定在组件状态下要更新的字段：

坏：

handleOnChange1 = (event) => (this.setState({userName: event.target.value}))
handleOnChange2 = (event) => (this.setState({lastName: event.target.value}))

但是，通过命名元素并在组件状态下将它们与匹配字段进行协调，只要您使用对象标记，您就不必担心编写其他事件处理程序。

好：

class UserForm extends React.Component{
   state = {
       firstName: "",
       lastName: ""
   }
   handleOnChange = (event) => {
      this.setState({
          [event.target.name]: event.target.value
      })
   }
   render(){
      return(
         <div>
             <input name="firstName" value={this.state.firstName} onChange={this.handleOnChange}/>
             <input name="lastName" value={this.state.lastName} onChange={this.handleOnChange}/>
         </div>
      )
   }

}

由于没有得到以下代码的功能是什么

2 个答案: