如何使用映射React从useState添加2个键? [英] How to add 2 keys from useState using mapping React?

问题描述

我想做的是在我想从小处开始的"mktrateestimate"中显示"currgroupinputrate"和"mktratedelta"的加法，因此我尝试在"mktratedelta"输入字段中输入内容，然后应显示此输入以mktrateestimate表示，但未在mktratedelta中显示输入.如何解决此问题，正确的方法是什么?

what I am trying to do is to display the addition of "currgroupinputrate" and "mktratedelta" in "mktrateestimate" I wanted to start small so I tried to enter something in "mktratedelta" input field ,this input should be then displayed in mktrateestimate but its not displaying the input in mktratedelta. How to fix this and what would be the right approach ?

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 .

You should try something like this code. It just the start you can carry on yourself from there. You should find a way to manage your controlled input. For more read Uncontrolled Components and Controlled Components in react. check out parseFloat in javascript.

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>
      ))}
    </>
  );

这篇关于如何使用映射React从useState添加2个键?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！