React.js - 如何保留 inputnumber 中的值并对其进行更改？

编程问答 2022-05-03

问题描述

当我想输入一个新值时，它会删除旧值。我想在旧值之上进行更改。我应该怎么做？

first image => value 50

如图所示，当我输入50的值后，我点击的那一刻，值变成0，我失去了它的价值。

second image => value 0

代码如下：

https://paste.ubuntu.com/p/kykZccS6gC/

解决方法

我将您的代码放在 Codesandbox 中以便于测试。

https://codesandbox.io/s/modern-breeze-nbiir?file=/src/App.js:3304-3519

问题是InputNumber的值，应该是状态值而不是props（props的值总是0）。

const MoonEditor = (productKey,month,props) => {
    return (
      <InputNumber
        value={products1[0][month]} // <-- the latest updated value from products1
        onValueChange={(e) => onEditorValueChange(productKey,props,e.value)}
      />
    );
}

我通过在 MoonEditor() 中提供月份参数来更改您的一些代码以避免重复的 InputNumber 声明

更新

抱歉，库实际上更新了 prop 值 因此，进行一些更改就可以使其正常工作。问题只是 InputNumber 的重复弄乱了 props 的值

https://codesandbox.io/s/condescending-shirley-j7nh2?file=/src/App.js:3370-3513

<InputNumber
    inputStyle={{ width: "50px" }}
    value={props.rowData[month]}
    onValueChange={(e) => onEditorValueChange(productKey,e.value)}
/>
javascriptprimereactreactjsreactjsreactjsreactjs