javascript - 如何使用映射 React 从 useState 添加 2 个键?
问题描述
我想要做的是在“mktrateestimate”中显示“currgroupinputrate”和“mktratedelta”的添加我想从小处开始所以我尝试在“mktratedelta”输入字段中输入一些内容,然后这个输入应该显示在mktrateestimate中但是它没有在 mktratedelta 中显示输入。如何解决这个问题以及正确的方法是什么?
const [marketEstimateDataBCAssets, setmarketEstimateData] = useState([
{
name: "Lombard",
prevgroupinputrate: 0.01,
currgroupinputrate: 0.02,
mktratedelta: 0.03,
mktrateestimate: 0.04
},
{
name: "Other Secured",
prevgroupinputrate: 0.01,
currgroupinputrate: 0.02,
mktratedelta: 0.033,
mktrateestimate: 0.04
},
{
name: "Unsecured",
prevgroupinputrate: 0.01,
currgroupinputrate: 0.02,
mktratedelta: 0.0333,
mktrateestimate: 0.04
}
]);
return (
{marketEstimateDataBCAssets.map((item, key) => {
return (
<Segment>
<div> {item.name}</div>
<div> {item.prevgroupinputrate}</div>
<div> {item.currgroupinputrate}</div>
<input
value={item.mktratedelta}
onChange={e => {
const newArr = marketEstimateDataBCAssets.map(el => {
if (el.name === item.name) {
return { ...el, mktratedelta: parseFloat(e.target.value) };
}
return el;
});
console.log(newArr);
return setmarketEstimateData([...newArr]);
}}
/>
<div> {marketEstimateDataBCAssets[key].mktrateestimate}</div>
</Segment>
);
})} ```
解决方案
你应该试试这个代码。这只是一个开始,您可以从那里继续自己。你应该找到一种方法来管理你控制的input
. 有关更多信息,请阅读反应中的非受控组件和受控组件。在 javascript 中查看parseFloat 。
return (
<>
{marketEstimateDataBCAssets.map((item, key) => (
<div key={item.name}>
{/* let's name is unique */}
<div> {item.name}</div>
<div> {item.prevgroupinputrate}</div>
<div> {item.currgroupinputrate}</div>
<input
value={item.mktratedelta}
onChange={e => {
const newArr = marketEstimateDataBCAssets.map(el => {
if (el.name === item.name) {
return {
...el,
mktratedelta: parseFloat(e.target.value),
mktrateestimate: (
parseFloat(e.target.value) + item.currgroupinputrate
).toFixed(4)
};
}
return el;
});
console.log(newArr);
return setmarketEstimateData([...newArr]);
}}
/>
<div> {item.mktrateestimate}</div>}
</div>
))}
</>
);
推荐阅读
- html - 使用 font-face 在 css 中加载本地字体时出现问题
- php - MYSQL 获取列值并在 PHP 中显示
- reactjs - VS Code 在智能感知中看不到 css 文件
- r - 根据数值变量的水平编码新因子
- c# - Microsoft Graph API query involving externalUserState C#
- regex - 无法为不同的 URL 创建正则表达式
- vb.net - 应用程序不会在调试模式下启动
- python - Odoo 10 - 带有 onChange() 装饰器的函数和新对象
- sql - 获取日期函数
- xamarin.forms - 带有 Xamarin 表单的 MobileFirst 7.1