javascript - 如何在 React Hooks 的对象数组中更新状态`onChange`
问题描述
我检索了存储useState
在对象数组中的数据,然后将数据输出到表单字段中。现在我希望能够在我输入时更新字段(状态)。
我已经看到人们更新数组中属性状态的示例,但从未更新对象数组中的状态,所以我不知道该怎么做。我已经将对象的索引传递给回调函数,但我不知道如何使用它来更新状态。
// sample data structure
const datas = [
{
id: 1,
name: 'john',
gender: 'm'
}
{
id: 2,
name: 'mary',
gender: 'f'
}
]
const [datas, setDatas] = useState([]);
const updateFieldChanged = index => e => {
console.log('index: ' + index);
console.log('property name: '+ e.target.name);
setData() // ??
}
return (
<React.Fragment>
{datas.map((data, index) => {
<li key={data.name}>
<input type="text" name="name" value={data.name} onChange={updateFieldChanged(index)} />
</li>
})}
</React.Fragment>
)
解决方案
这是您的操作方法:
// sample data structure
/* const data = [
{
id: 1,
name: 'john',
gender: 'm'
}
{
id: 2,
name: 'mary',
gender: 'f'
}
] */ // make sure to set the default value in the useState call (I already fixed it)
const [data, setData] = useState([
{
id: 1,
name: 'john',
gender: 'm'
}
{
id: 2,
name: 'mary',
gender: 'f'
}
]);
const updateFieldChanged = index => e => {
console.log('index: ' + index);
console.log('property name: '+ e.target.name);
let newArr = [...data]; // copying the old datas array
newArr[index] = e.target.value; // replace e.target.value with whatever you want to change it to
setData(newArr);
}
return (
<React.Fragment>
{data.map((datum, index) => {
<li key={datum.name}>
<input type="text" name="name" value={datum.name} onChange={updateFieldChanged(index)} />
</li>
})}
</React.Fragment>
)
推荐阅读
- python - 为什么在 python 中向 http cookiejar 添加 cookie 如此困难?我总是以 CookieError: Attempt to set a reserved key 'domain' 结束
- python-3.x - Tensorflow 2.x 中的微批处理(累积梯度)与 tf.function
- php - 卷曲请求重定向
- mongodb - 如何在 mongo 中搜索拼写错误的单词
- python - 如何为 docker 容器设置代理设置?
- c++ - 如何在类中的其他 vtable 指针中选择 vtable 指针?
- jenkins - 如何修复这个 Jenkins 流水线?
- linux - Yocto 抱怨两个食谱安装了相同的头文件
- ruby-on-rails - 如何复制/复制有很多关联和更新少数列
- python - 如何遍历字符串列表并识别整数和浮点数,然后将它们添加到列表中?