javascript - 如何将函数放在 return 之外，然后从 onChange react 中调用它？

Question

我试图将我拥有的函数放在 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>
      ))}
    </>
  );```

Answer 1

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

const handleChange = (item) => 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]);
};

return (<>
        {marketEstimateDataBCAssets.map((item, key) => (
            <input
                key={key}
                value={item.mktratedelta}
                onChange={handleChange(item)}
            />
            < /div>
        ))}
    </>
)