如何验证React组件中的数字输入

Question

在我的return语句中，我尝试检查一个有效的数字，否则赋值为0。这似乎不起作用，有其他方法吗？

return (
<Input
color="teal"
size="regular"
outline={true}
type={question?.type}
name={question?.name}
value={value ?? ''}
placeholder={question?.placeholder ?? ''}
onChange={(e: React.FormEvent<HTMLInputElement>) => {
if (question?.type === 'number' && Number(e.currentTarget.value) < 1) {
e.currentTarget.value = 0;
}
dispatch(
setResponseGeneric({
property: question?.name,
value: e.currentTarget.value,
})
);
}}
></Input>
);

Answer 1

这是因为Number('bad input')返回NaN(不是数字(。CCD_ 4是不小于或大于1的值。您应该更改您的条件，以便它处理这些场景。

if (question?.type === 'number' && (isNaN(e.currentTarget.value) || Number(e.currentTarget.value) < 1)) {

此外，除了您的问题之外，像在这里e.currentTarget.value = 0;中那样更改元素值是一种糟糕的做法，因为您必须更改它。最好确保您正在更改状态，以便value变量变为0(我不确定setResponseGeneric中是否已经发生了这种情况(。