Как разместить функцию вне возврата, а затем вызвать ее из onChange реагировать? - PullRequest
Новая
       0

Как разместить функцию вне возврата, а затем вызвать ее из onChange реагировать?

0 голосов
/ 07 ноября 2019

Я пытаюсь поместить имеющуюся у меня функцию вне оператора 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 ]

3 голосов
/ 07 ноября 2019

Как видите, onChange prop принимает функцию, поэтому вы можете установить эту функцию в постоянную переменную и передать ее 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>
        ))}
    </>
)
2 голосов
/ 07 ноября 2019

Вы можете создать функцию и просто вызвать ее. 

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

ИЛИ 

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

Это зависит от того, где вы определяете функцию.

...