保持变量类型，当我从输入中得到值时，用更改
提问于 2019-05-30 07:15:38
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时，它会发生错误。
警告:接收到用于NaN属性的
value。如果这是预期的，则将值强制转换为字符串。
保持num类型的最佳方法是什么？
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-05-30 07:26:13
这个问题源于parseInt可能会崩溃这一事实。
如果您不能成功地parseInt您的“字符串”输入值，您将得到一个错误。可以向当前值添加回退值或将其重置为0，或者在setNum失败时避免调用parseInt。
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;Stack Overflow用户
发布于 2021-08-29 22:38:50
我有同样的问题，我只是绕过它，使输入的值等于状态或空字符串。这样，它不会影响值的状态，它只是一个空字符串。
<input
type="number"
onChange={e => setNum(parseInt(e.target.value))}
value = {num || ""}
/>在此之后，我还添加了验证，以确保num不会长时间作为NAN存在。
Stack Overflow用户
发布于 2021-08-31 07:40:26
我通过检查NaN值解决了这个问题。
<input
type="number"
onChange={e => {
Object.is(NaN, parseInt(e.target.value))
?setNum(e.target.value)
:setNum(parseInt(e.target.value))
}
}
value = {num}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56381007
复制相关文章
腾讯云开发者
