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

在handleChange函數中，您可以將setState更改為以下內容：

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

Answer 2

第二種情況不起作用，因為存在缺陷。 因此，要使代碼運行，您需要在輸入字段中進行兩處更改

1） name="list[firstName]" as name="firstName"

2） value={this.state.firstName} as value={this.state.list.firstName}

如果在輸入字段中使用name="list[firstName]" ，那么每當執行handleChange方法中的[name]: value時，它將計算為['list[firstName]']: value ，它將創建另一個屬性list[firstName]在該州。

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

因此它不會像您期望的那樣更新list的屬性firstName 。

有關更多詳細信息： 計算的屬性名稱

使用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} 
    />

在handleChange方法中，您正在嘗試更新list的屬性firstName和lastName 。

因此，首先需要在this.setState方法中使用list作為this.setState({ list: {...}}) 。

由於list是一個對象，並且您想要更新list特定屬性，因此首先需要使用spread運算符復制list所有屬性。 然后，您可以使用動態/計算屬性更改要更改的屬性。 所以將handleChange方法更改為

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

Answer 3

首先，您正確地在handleChange函數中對event.target中的name和value道具進行了handleChange ，但是您在兩個<input>元素上設置的name屬性並不直觀。 您的name屬性當前是"list[firstName]"和"list[lastName]" - >這將不會到達您的this.state.list[firstName] / this.state.list[lastName]屬性，而是 - ，您應該更改您的name屬性以反映您的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
        }
    }))
}