用- and处理数字的最好方法是什么?控制输入?

Question

我想在每次值更新时以数字类型保存输入。然而，使用这种方法，在下面的场景中，该值被固定为NaN或0。

场景1:将0更改为0.1(当'0 '时卡在0。"左)

场景2:将-15更改为1(当只有'-'时卡在NaN中)

当1)输入必须是受控元素并且2)不能以字符串格式存储值时，处理这些情况的最佳方法是什么?

export default function App() {
const [input, setInput] = useState(0)
return (
<div className="App">
<input value={input} onChange={(e)=>setInput(parseFloat(e.target.value))}/>
</div>
);
}

Answer 1

您可以在设置状态之前添加一个检查，以查看输入值是否可解析为浮点数。

function checkSetInput(e) {
const val = parseFloat(e.target.value);
if (isNaN(val)) 
return // do not set state when the input is not parsable
setInput(val); // otherwise do set the state
}
...
<input value={input} onChange={checkSetInput} />