当我从输入中获取值时，保留一个变量类型

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。

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;

Answer 2

我遇到了同样的问题，我只是通过让输入的值等于状态或空字符串来绕过它。 这样它不会影响值的状态，它只是一个空字符串。

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

有了这个，我还添加了验证，以确保 num 不会长时间作为 NAN 停留。

Answer 3

我通过检查 NaN 值解决了这个问题。

<input
  type="number"
  onChange={e => {
      Object.is(NaN, parseInt(e.target.value))
          ?setNum(e.target.value)
          :setNum(parseInt(e.target.value))
      }
  }
  value = {num}
/>

Answer 4

除了使用parseInt()，您还可以使用Number()其中空白将自动转换为0。

如果输入字段为空，请使用defaultValue而不是value喜欢这个

const { useState } = React;
const App = () => {
  const [num, setNum] = useState(0);
  //changes made below
  return (
    <input type="number" defaultValue={num} onChange={(e)=>setNum(Number(e.target.value))} />
  )
}
ReactDOM.render(<App />, document.getElementById('root'));

但是，在您的情况下，默认值是0，因为这是num的初始值

您可以将其更改为此const [num, setNum] = useState('');

注意：它仅适用于包括小数在内的所有数字