javascript - React - 如何循环和更新对象模型中的值?
问题描述
我有一个对象模型模式如下
this.state = {
data: {
audi: {
engine: '2.5',
gearbox: 'auto',
fuel: 'petrol'
},
bmw: {
engine: '3.0',
gearbox: 'auto',
fuel: 'petrol'
},
merc: {
engine: '6.3',
gearbox: 'manual',
fuel: 'petrol'
}
}
}
我的目标是:
- 循环遍历数据并渲染
- 将 HTML 中的值更改映射到 this.state.data 对象中的相应键
我没有使用数组,因为发布它时它必须看起来像上面的对象模式。
目前我正在尝试这样做:
//To render
Object.entries(this.state.data).map((x,index) =>
<p>x.key</p> //Trying to reach 'audi' with x.key
// Render each KPV in object
{x.key}: <input key={index} onChange={this.handleChange} value={x.value}/>
)
然后更新同一状态模型中的对应值:
// To update the state model with changed values
setData = (key, val) => {
this.setState(state => ({
data: {
...state.data,
obj: { [key]: val },
//Don't know how to map to state properly!
}
}));
};
// Handle input change
handleChange = key => e => {
this.setData(key, e.target.value);
};
请任何人都可以就这种方法给我建议,非常感谢:)
解决方案
首先,您需要正确渲染,这意味着循环遍历所有键(汽车制造商),然后遍历所有属性/值对。您可以使用解构数组使这更容易
Object.entries(someObject).map( ([key,value]) => .... )
继承人渲染:
render() {
return Object.entries(this.state.data).map(([maker, props]) => {
return (
<div>
<h2>{maker}</h2>
{Object.entries(props).map(([key, value], index) => {
return (
<div>
{key}:{" "}
<input
key={index}
onChange={this.handleChange(maker, key)}
defaultValue={value}
/>
</div>
);
})}
</div>
);
});
}
您会注意到我更改了您的handleChange
方法以传递汽车制造商和正在编辑的属性 - 这可以传递给setData
:
// To update the state model with changed values
setData = (maker, key, val) => {
this.setState((state) => ({
data: {
...state.data,
[maker]: {
...state.data[maker],
[key]: val
}
//Don't know how to map to state properly! Now you do!
}
}));
};
// Handle input change
handleChange = (maker, key) => (e) => {
this.setData(maker, key, e.target.value);
};
现场工作示例:https ://codesandbox.io/s/react-playground-forked-dw9sg
推荐阅读
- database - Laravel 5.7 迁移 - 如何在可为空的外键上删除级联
- c++ - 如何从 GeoTIFF 数据创建 QImage(或正确解释)
- regex - 通过正则表达式模式查找索引位置并将其替换为 Scala 中的索引列表
- regex - Python 正则表达式拆分但保留某些字符进行拆分
- mysql - 如何在 MySQL 5.x 中使用多个连接更新 SELECT
- c++ - Add+Mul 使用 Intrinsics 变得更慢 - 我哪里错了?
- c# - 计算可配置小时之间的分钟数
- ios - 当用户在 iOS 应用程序中进行某些操作时如何启动 Apple Watch 应用程序
- python - 使用 mapnik 渲染道路
- python - 在 TensorFlow 中打印完整的张量值