Reactjs 因为我没有得到下面代码的功能

有人能在下面逐行给我解释一下吗

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

据我了解

我们正在创建变量字段，并将字段的当前状态存储在变量中，因为我们无法禁用该状态

我不知道

字段[e.target.name]=e.target.value

更新字段

---

有人能逐行给我解释一下上述功能吗

字段[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']语法，您可以动态读取和设置对象的属性。 参考文献

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

所以在你的名单上

这是正确的。let fields=this.state.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>
      )
   }

}

但是，通过命名元素并将它们与组件状态中的匹配字段协调，只要使用对象notaton，就不必担心编写额外的事件处理程序

好：

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

}

类UserForm扩展了React.Component{ 状态={ 名字：“， 姓氏：“ } handleOnChange=（事件）=>{ 这是我的国家({ [event.target.name]：event.target.value }) } render（）{ 返回( ) } }

---

Hi&欢迎来到StackOverflow。本论坛旨在帮助您理解为什么部分代码不起作用，而不是解释一种语言。为此，请使用上述技术的手册。请参见此处（）和此处（），了解改进问题的方法。