如何将函数放在返回值之外,然后从onChange调用它呢?

时间:2019-11-07 15:51:03

标签: javascript reactjs frontend

我正在尝试将我具有的功能放在return语句之外 因此我可以在代码中从“ onChange”调用该函数,因此在需要时不必一次又一次地重写它。我是JS的新手,尝试时遇到了一些困难。我该如何解决这个问题?

    {
      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) => (
          <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;
              });

              return setmarketEstimateData([...newArr]);
            }}
          />
        </div>
      ))}
    </>
  );```

2 个答案:

答案 0 :(得分:3)

如您所见,batch_size属性接受一个函数,因此您可以在常量变量中设置此函数并将其传递给onChange,如下所示:

onChange

答案 1 :(得分:2)

您可以创建一个函数并直接调用它。

const myFunc = (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;
  });

  return setmarketEstimateData([...newArr]);
}

然后您可以像这样

<input value={item.mktratedelta} onChange={myFunc} />

OR

<input value={item.mktratedelta} onChange={this.myFunc} />

这取决于您在哪里定义函数。