React – 使用 react-numeric-input 在本地存储中持久化状态。

我在一个bootstrap表格中使用了 react-numeric-input 库，这些是处理OnChange的代码。

          <td>
              <NumericInput
                value={
                  0
                }
                onChange={handleOnChange}
                step={0.01}
                mobile={false}
                size="14"
              />
            </td>

而这些都是处理OnChange的代码。

  const [value, setValue] = useState(0);

  const handleOnChange = event => {
    localStorage.setItem('myValueInLocalStorage', event.target.valueAsNumber);
    setValue(event.target.valueAsNumber);
  };

我得到这个错误的回报。

TypeError: Cannot read property 'valueAsNumber' of undefined

我是React和钩子的新手，所以管理状态对我来说有点问题。我想做的就是改变输入值并将其持久化在本地存储中，这样当浏览器刷新时，它就会记住最后的值……。

OK UPDATE

所以我取得了一些进展，这段代码实际上避免了这个错误。

const handleOnChange = event => { const value = event; localStorage.setItem('myValueInLocalStorage', value); setValue(parseFloat(value)); }; 

值会进入本地存储，但输入框本身的值却没有改变… …困惑的是… …

解决方案：

试试这个

const handleOnChange = event => {
  const value = parseInt(event.target.value);
  localStorage.setItem('myValueInLocalStorage', value);
  setValue(value);
};