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

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

reactjs

ReactJS事件处理程序更新字典值的状态,reactjs,Reactjs,我正在尝试为几个输入框编写一个事件句柄，我意识到它无法更新dict的状态。如果我将其更改为string，它就可以正常工作如果我将状态更改为“跟随”，它将正常工作。 this.state = { firstName: "", lastName: "" } import React, {Component} from "react" class App extends Component { constructor() {

我正在尝试为几个输入框编写一个事件句柄，我意识到它无法更新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

但以下内容不适用

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

import React，{Component}来自“React”
类应用程序扩展组件{
构造函数（）{
超级（）
此.state={
名单：{
名字：“，
姓氏：“
}
}
this.handleChange=this.handleChange.bind（this）
}
手变（活动）{
常量{name，value}=event.target
console.log（名称）
这是我的国家({
[名称]：值
})
}
render（）{
返回(


{this.state.firstName}{this.state.lastName}
)
}
}
导出默认应用程序

在

handleChange

功能中，您可以将设置状态更改为以下内容：

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

在

handleChange

功能中，您可以将设置状态更改为以下内容：

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

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

1）

name=“list[firstName]”

name=“firstName”

2）

value={this.state.firstName}

value={this.state.list.firstName}

如果在输入字段中使用

name=“list[firstName]”

，则每当执行

handleChange

方法中的

[name]：value

时，它将计算为

['list[firstName]]：value

，并将在该状态下创建另一个属性

list[firstName]

i、 e

state={list:{…}，list[firstName]：value}

因此，它不会像您预期的那样更新

列表中的firstName
属性
有关更多详细信息：
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

使用value={this.state.list.firstName}
我们可以将statelist.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} 
    />

第二种情况不起作用，因为存在缺陷。因此，要使代码运行，您需要在输入字段中进行两个更改
1） name=“list[firstName]”
asname=“firstName”

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

如果在输入字段中使用name=“list[firstName]”
，则每当执行handleChange
方法中的[name]：value
时，它将计算为['list[firstName]]：value
，并将在该状态下创建另一个属性list[firstName]

i、 estate={list:{…}，list[firstName]：value}

因此，它不会像您预期的那样更新列表中的firstName
属性
有关更多详细信息：
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

使用value={this.state.list.firstName}
我们可以将statelist.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
函数中正确地分解了name
和value
道具event.target
，但在两个
元素上设置的name
属性并不直观。您的name
属性当前是“list[firstName]”
和“list[lastName]”
->这不会影响到您的this.state.list[firstName]
this.state.list[lastName]
属性，而是，您应该更改名称
属性以反映您的状态
值，如下所示：
<input
    name="firstName"
    {/* other props stay the same... */}
/>
<input
    name="lastName"
    {/* other props stay the same... */}
/>

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

首先，您在handleChange
函数中正确地分解了name
和value
道具event.target
，但在两个
元素上设置的name
属性并不直观。您的name
属性当前是“list[firstName]”
和“list[lastName]”
->这不会影响到您的this.state.list[firstName]
this.state.list[lastName]

属性，而是，您应该更改

名称

属性以反映您的

状态

值，如下所示：

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

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

请详细说明您的答案这就是我想说的，使用静态字符串作为

name-“firstname

。JSX不会使用静态字符串中的动态内容转换为设置状态。请详细说明您的答案这就是我想说的，使用静态字符串作为

name-“firstname

。JSX不会使用静态字符串中的动态内容转换为设置状态。