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

【问题标题】：React.js - How can I keep the value in inputnumber and make changes on it?React.js - 如何保留 inputnumber 中的值并对其进行更改？
【发布时间】：2021-07-28 18:14:30
【问题描述】：

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

如图所示，我输入50的数值后，一点击，数值就变成了0，失去了数值。

代码如下：

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

【问题讨论】：

你应该只用setProducts1更新状态。
你说的是哪一行？
最好在问题中放一段小代码摘录。对于以后的问题...
谢谢，我下次再做。

标签： javascript reactjs primereact

【解决方案1】：

为了方便测试，我把你的代码放在 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, props, e.value)}
/>

【讨论】：

非常感谢。我还想问一件事。当我单击输入字段时，它占用了太多空间。可能是什么原因？
对不起，我的回答不正确。我刚刚阅读了文档，图书馆将更新道具，我更改了代码。请在一分钟内查看我上面的最新更新
。当我单击输入字段时，它占用了太多空间。可能是什么原因？
将 inputStyle 应用于 InputNumber 可以控制输入的宽度。您也可以使用 CSS 类来执行此操作。我更新了答案和代码框中的代码，它包括 inputStyle
非常感谢。