React - 使用 react-numeric-input 将 state 持久保存在本地存储中

Question

我正在使用react-numeric-input库在引导表中呈现它：

          <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 和 hooks 的新手，所以管理 state 对我来说有点问题。 我要做的就是更改输入值并将其保存在本地存储中，因此当浏览器刷新时，它会记住最后一个值...

好的更新

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

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

然后该值进入本地存储，但输入框本身的值没有改变......难倒......

Answer 1

尝试这个：

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