javascript - onChange 对象在 React 中的状态
问题描述
我想在检查输入后在对象中添加一个新状态。项目状态是一个对象,里面有另一个对象
const [item, setItem] = useState({
series: '',
model: '',
addons: {
gps: false,
wifi: false,
esim: false,
},
price: ''
})
更改系列,按值输入的模型很明显,但是如何更改插件中的对象?我不能这样做
onChange={(e) => setItem({ ...item, gps: e.target.checked })}
或者
onChange={(e) => setItem({ ...item, addons.gps: e.target.checked })}
代码:
import React, {useState} from "react";
import "./style.css";
export default function App() {
const [item, setItem] = useState({
series: '',
model: '',
addons: {
gps: false,
wifi: false,
esim: false,
},
price: ''
})
const sendItem = () => {
console.log(item, 'add item')
}
return (
<div>
<form onSubmit={sendItem}>
<div>
<label htmlFor="series">Series:</label>
<input
name="series"
label="series"
type="text"
value={item.series}
onChange={(e) => setItem({ ...item, series: e.target.value })}
/>
</div>
<div>
<label htmlFor="model">Model:</label>
<input
name="model"
label="model"
type="text"
value={item.model}
onChange={(e) => setItem({ ...item, model: e.target.value })}
/>
</div>
<div style={{display: 'flex', flexDirection: 'row', justifyContect: 'center', alignItems: 'center'}}>
<label htmlFor="addons">Addons:</label>
<p>GPS:</p>
<input
name="gps"
type="checkbox"
onChange={(e) => setItem({ ...item, gps: e.target.checked })}
/>
<p>Wifi:</p>
<input
name="wifi"
type="checkbox"
onChange={(e) => setItem({ ...item, wifi: e.target.checked })}
/>
<p>Esim:</p>
<input
name="esim"
type="checkbox"
onChange={(e) => setItem({ ...item, esim: e.target.checked })}
/>
</div>
<div>
<label htmlFor="price">Price:</label>
<input
name="price"
label="price"
type="text"
value={item.price}
onChange={(e) => setItem({ ...item, price: e.target.value })}
/>
</div>
<button type="submit">Send</button>
</form>
</div>
);
}
解决方案
setItem({ ...item, addons: {...item.addons, gps: e.target.checked} })
您可以同时传播item
和addons
,只允许您更新addons
需要更改的属性。
推荐阅读
- mysql - 选择大于和直到的位置
- android - RXJava 调度程序/线程如何为不同的操作员工作?
- java - Android : Mockito (2.0.2-beta) - 无法模拟/监视最终类
- database - 一次获取所有数据或每天获取数据,哪个对mongo更快?
- graphviz - 连接集群时的中心对齐
- html - h3 占用全宽
- python - 更改熊猫数据框切片上的数据的正确方法
- c# - 推特维。当前上下文中不存在名称“CredentialsCreator”
- python - 给定一个值,使用 Networkx 选择一个属性。Python
- java - Java 字符串到日期的转换