代码之家 › 专栏 › 技术社区 › Gaurang Shah

ReactJS事件处理程序字典值的更新状态

reactjs

Gaurang Shah · 技术社区 · 6 年前

我试图为一些输入框编写一个事件句柄,我意识到它无法更新dict的状态。如果我将其更改为string,它就可以正常工作。

如果我将状态更改为跟踪,它会正常工作。

this.state = {          
        firstName: "",
        lastName: ""    
}

但是,以下内容没有

import React, {Component} from "react"

class App extends Component {
    constructor() {
        super()
        this.state = {
            list: {
                firstName: "",
                lastName: ""    
            }

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

    handleChange(event) {
        const {name, value} = event.target
        console.log(name)
        this.setState({
            [name]: value
        })
    }

    render() {
        return (
            <form>
                <input 
                    type="text" 
                    value={this.state.firstName} 
                    name="list[firstName]" 
                    placeholder="First Name" 
                    onChange={this.handleChange} 
                />
                <br />
                <input 
                    type="text" 
                    value={this.state.lastName} 
                    name="list[lastName]" 
                    placeholder="Last Name" 
                    onChange={this.handleChange} 
                />

                <h1>{this.state.firstName} {this.state.lastName}</h1>
            </form>
        )
    }
}

export default App

3 回复 | 直到 6 年前

Blundering Philosopher 6 年前

首先,你正确地摧毁了 name 和 value 道具 event.target 在你 handleChange 功能,但是 名称 你在两个人身上设置的属性 <input> 元素不是直观的。你的 名称 属性当前为 "list[firstName]" 和 "list[lastName]" ->这不会影响您的 this.state.list[firstName] / this.state.list[lastName] 属性-相反,您应该更改 名称 属性以反映 state 值,如下所示:

<input
    name="firstName"
    {/* other props stay the same... */}
/>
<input
    name="lastName"
    {/* other props stay the same... */}
/>

既然你 <输入& GT; 元素有 名称 与您的 状态 ,您可以更改 换手 功能如下:

handleChange(event) {
    // get name and value properties from event target
    const {name, value} = event.target
    this.setState(prevState => ({
        // update your 'list' property
        list: {
          // spread old values into this object so you don't lose any data
          ...prevState.list,
          // update this field's value
          [name]: value
        }
    }))
}

Umair Farooq 6 年前

在你 handleChange 函数可以将setState更改为以下值:

this.setState({
      list: {
        [name]: value
      }
    })
// in input
value={this.state.list.firstName}

Sahil Raj Thapa 6 年前

第二种情况不起作用,因为存在缺陷。因此,要使代码运行,您需要在输入字段中进行两次更改。

1) name="list[firstName]" 作为 name="firstName"

2) value={this.state.firstName} 作为 value={this.state.list.firstName}

如果你使用 name=“list[名字]” 在输入框中,然后每当 [name]: value 在里面 handleChange ['list[firstName]']: value 它将创建另一个属性 list[firstName] 在国家。

即 state = { list: {...}, list[firstName]: value } .

所以它不会更新属性 firstName 里面 list 正如你所料。

有关详细信息: Computed Property Names

并使用 value=this.state.list.firstname_ 我们可以绘制州地图 list.firstName 使用输入字段

    <input 
            type="text" 
            // do not use value={this.state.firstName} 
            value={this.state.list.firstName} 
            // do not use name="list[firstName]"
            name="firstName" 
            placeholder="First Name" 
            onChange={this.handleChange} 
    />

    <input 
            type="text" 
            value={this.state.list.lastName} 
            name="lastName" 
            placeholder="Last Name" 
            onChange={this.handleChange} 
    />

在你 换手 方法,您正在尝试更新属性 第一名字 和 lastName 里面 列表 .

所以要先这样做,你需要使用 列表 里面 this.setState 方法AS this.setState({ list: {...}}) .

AS 列表 是一个对象,您要更新的特定属性 列表 列表 使用排列运算符。然后,可以使用动态/计算属性更改要更改的属性。所以改变你的 换手 方法到

handleChange(event) {
        const {name, value} = event.target
        this.setState({
            list: {
              // copy all properties inside the "list" 
              // so that we change only the property 
              // we need to change and keep other properties as it is
              ...this.state.list,
              // dynamically changing property
              [name]: value
            }
        })
    }