当我使用 React-hooks 从 onchange 输入获取值时保持变量类型

Question

const { useState } = React;

const App = () => {
  const [num, setNum] = useState(0);
  
  return (
    <input type="number" value={num} onChange={(e)=>setNum(parseInt(e.target.value))} />
  )
}

ReactDOM.render(<App />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root" />

我想保持num's type as Number，而不是String。

但是，onChange=(e=>setNum(e.target.value))makenum的类型String

我试着像这样改变onChange={e=>setNum(parseInt(e.target.value))}。

但是，当我输入时white-space，它发生错误。

警告：收到value属性的NaN 。如果这是预期的，请将值转换为字符串。

保持num类型的最佳方法是什么？

Answer 1

该问题源于parseInt可能会中断。

如果您无法成功解析“字符串”输入值，您将收到错误消息。您可以向当前值添加回退或重置为 0，或者避免在 parseInt 失败时调用 setNum。

import React, { useState } from 'react';

const App: React.FC = () => {
  const [num, setNum] = useState(0);

  return (
    <input
      type="number"
      onChange={e => setNum(parseInt(e.target.value) || num)}
    />
  );
};

export default App;