Reactjs 使用React钩子从input onchange获取值时保留变量类型

const{useState}=React；
常量应用=（）=>{
const[num，setNum]=useState（0）；
返回(
setNum（parseInt（e.target.value））}/>
)
}
ReactDOM.render（，document.getElementById（'root'））
这个问题源于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;

import React，{useState}来自“React”；
常量应用程序：React.FC=（）=>{
const[num，setNum]=useState（0）；
返回(
setNum（parseInt（e.target.value）| | num）}
/>
);
};
导出默认应用程序；
您有一个Syntax错误
onChange={…}
。你有normal（）而不是{}@VlatkoVlahek忽略它。对不起，伙计们。我刚刚编辑了我的问题。伙计们，我正在用代码片段重新编写。如果你想避免NaN，需要输入验证。您需要用一个值替换NaN，或者在导致NaN时一起中止更改。这两种解决方案都会给用户带来不便，因为如果在用户键入有效值时，该值变得无效，那么它将用您告诉它的任何内容替换他们的输入，或者什么也不做。您最好不要将其设置为受控输入。它会阻止输入
空白
，我想在键入数字时保留键入数字。也许，您给了我一个很大的提示，
setNum（parseInt（e.target.value）| |“”）
很高兴它指引了您正确的方向。但是，带有
''
的setNum不应在tbh下工作，因为您将返回到字符串来获取数值。如果当前值为非零，此代码将阻止用户将
num
设置为零。考虑检查PARSETIN的返回值，而不是伪造，因为0的返回值是伪造的，但可能是合法的用户输入。