本文介绍了如何使用映射 React 从 useState 添加 2 个键?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我要做的是在mktrateestimate"中显示currgroupinputrate"和mktratedelta"的添加我想从小处着手,所以我尝试在mktratedelta"输入字段中输入一些内容,然后应该显示此输入在 mktrateestimate 但它不显示 mktratedelta 中的输入.如何解决这个问题以及正确的方法是什么?

const [marketEstimateDataBCAssets, setmarketEstimateData] = useState([{名称:伦巴第",prevgroupinputrate: 0.01,currgroup 输入率:0.02,mktratedelta:0.03,mktrateestimate: 0.04},{名称:其他担保",prevgroupinputrate: 0.01,currgroup 输入率:0.02,mktratedelta:0.033,mktrateestimate: 0.04},{名称:不安全",prevgroupinputrate: 0.01,currgroup 输入率:0.02,mktratedelta:0.0333,mktrateestimate: 0.04}]);返回 ({marketEstimateDataBCAssets.map((item, key) => {返回 (<段>

{item.name}</div>

{item.prevgroupinputrate}</div>

{item.currgroupinputrate}</div>
{marketEstimateDataBCAssets[key].mktrateestimate}</div></段>);})} ```
解决方案

你应该试试这样 代码.这只是一个开始,您可以从那里继续自己.您应该找到一种方法来管理您的受控 input.更多阅读 非受控组件受控组件在反应.在 javascript 中查看 parseFloat.

返回 (<>{marketEstimateDataBCAssets.map((item, key) => (<div 键={item.name}>{/* 让我们的名字是唯一的 */}

{item.name}</div>

{item.prevgroupinputrate}</div>

{item.currgroupinputrate}</div>
{item.mktrateestimate}</div>}</div>))}</>);

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>
        );
      })} ```
解决方案

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 个键?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-26 05:18
查看更多