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

Question

我正在尝试为几个输入框编写一个事件句柄，但我意识到它无法更新字典的状态。如果我将它更改为字符串，它就可以正常工作。

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

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

Answer 1

首先，您正确地解构了 name和 value来自 event.target 的 Prop 在你的handleChange函数，但是 name您在两个 <input> 上设置的属性元素不直观。你的name当前属性为 "list[firstName]"和 "list[lastName]" -> 这不会影响到您的 this.state.list[firstName]/this.state.list[lastName]您想要的属性 - 相反，您应该更改您的 name反射(reflect)您的属性 state值，像这样:

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

现在您的 <input>元素有name也与您的 state 上的值匹配的属性, 你可以改变你的 handleChange像这样的功能:

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