时间戳

首页 > 解决方案 > 因为我没有得到下面代码的功能

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

问题描述

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

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

作为我的理解

  1. 我们正在创建一个变量字段并将字段的当前状态存储在变量中，因为我们不能静音状态。
  2. 我不知道 fields[e.target.name] = e.target.value;
  3. 更新字段

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

标签： reactjs

解决方案

此代码让您可以使用对象表示法动态更改组件状态中字段的值。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>
      )
   }

}

推荐阅读