gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 00:23:59 24 4
gpt4 key购买 nike

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

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

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

最佳答案

首先,您正确地解构了 namevalue来自 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
}
}))
}

关于ReactJS 事件处理程序更新字典值的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54385877/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com