javascript - 如何将状态中新更新的动态值添加到 React.js 中的旧对象?
问题描述
我正在用 Java + React.js 创建一个 CRUD 应用程序。我想更新用户信息,我正在填充基于employeeDetails 数组的动态表单。结果,我从状态中的用户那里获得了动态更新的值。但我不确定如何将表单中的这些新输入值添加到旧对象,并将其更新并发送到后端。在此先感谢您的帮助。
我在提交表单后尝试执行 this.setState() ,以使用新值更新旧对象。
反应应用程序的状态:
state = {
employeeDetails: ['Name', 'Gender', 'Education', 'Address', 'Mobile Number', 'Experience'],
editEmployee: {
Name: "Rohan",
Gender: 23,
Education: "Software Engineer",
Mobile Number: 12345,
Experience: "Fresher"
}
}
更新用户的动态形式:
<form onSubmit={props.updateEmployee}>
{
Object.keys(props.editEmployee).map(details => <Fragment key={details}>
<label>{details}</label><br />
<input type="text" name={details} onChange={props.handleChange} defaultValue={props.editEmployee[details]} />
</Fragment>
)}
更新方法:
updateEmployee = (e) => {
e.preventDefault();
this.setState({
editEmployee: {...this.state.editEmployee, dynamic value}
})
axios.put("http://localhost:9450/updateEmployee", this.state.editEmployee)
.then(res => console.log(res))
.then(this.setState({
editEmployee: ''
}))
}
我想要我的 editEmployee 对象中新更新的值,我将其发送到后端服务器以更新用户信息。
解决方案
查看您的代码,假设您的 Form 是另一个单独的组件。
const Form = (props) => (
<form onSubmit={props.updateEmployee}>
{Object.keys(props.editEmployee).map((details) => (
<React.Fragment key={details}>
<label>{details}</label><br />
<input type="text" name={details} onChange={props.handleChange} defaultValue={props.editEmployee[details]} />
</React.Fragment>
))}
</form>
);
在您的父容器中,您有状态和方法
state = {
employeeDetails: ['Name', 'Gender', 'Education', 'Address', 'Mobile Number', 'Experience'],
editEmployee: {
Name: "Rohan",
Gender: 23,
Education: "Software Engineer",
'Mobile Number': 12345,
Experience: "Fresher"
}
}
handleChange = (e) => {
this.setState({
editEmployee: {
...this.state.editEmployee,
[e.target.name]: e.target.value,
},
})
}
updateEmployee = (e) => {
e.preventDefault();
axios.put("http://localhost:9450/updateEmployee", this.state.editEmployee)
.then(res => console.log(res))
}
您handleChange
应该更新状态值,并且您不必setState
在表单提交期间调用。当你打电话时,你应该已经有了状态的最新变化updateEmployee
推荐阅读
- minizinc - 为一套选择合适的一套
- python - Panda Slicing Notation 有什么更好的
- r - R - 根据日期差异加入两个数据框
- python - 如何在保留时区的同时序列化时间对象?
- tensorflow - RuntimeError:Tensorflow 不支持调整坐标变换模式=pytorch_half_pixel
- flutter - Flutter:位置启用/禁用流侦听器
- api - 如何在 Skype 群组对话中获取非联系成员的姓名?
- docker - 有没有办法在 Kubernetes 部署/pod 定义中给出类路径?
- html - 我无法通过表单向数据库添加数据
- pandas - 使用替换方法时列类型更改