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的类型保留为Number，而不是String。

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

我试图像这样onChange={e=>setNum(parseInt(e.target.value))}进行更改。

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

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

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

Answer 1

问题源于 parseInt 可能损坏的事实。

如果无法成功解析“字符串”输入值，则会出现错误。您可以为当前值添加一个后备值，也可以重置为0，或者避免在parseInt失败的情况下调用setNum。

groupdID

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

1 个答案: