Question

这是将如何在react / typescript中处理常规输入字段的方式，其中value是字符串类型：

const [value, onChange] = useState<string>('');

const onChange = (e: ChangeEvent<HTMLInputElement>) {
  setValue(e.target.value);
}

return (
  <input
    value={value}
    onChange={onChange}
  />
);

但是我在输入数字类型时遇到麻烦：

const [value, onChange] = useState<number>();

const onChange = (e: ChangeEvent<HTMLInputElement>) {
  // type error
  setValue(e.target.value);
}

return (
  <input
    type="number"
    value={value}
    onChange={onChange}
  />
);

在这种情况下，值是数字类型，输入是数字类型（因此，e.target.value应该总是数字类型。但是根据打字稿，event.target.value总是字符串。我可以将其转换为数字，即。

const onChange = (e: ChangeEvent<HTMLInputElement>) {
  setValue(Number(e.target.value));
}

但是现在，如果键入一些数字，并且用户将其退格以使其为空，则该值将更改为0-该字段永远不能为空。

将值保留为字符串，然后在保存时将其强制转换为数字不是可行的解决方案

我暂时要做的是将e.target.value设置为任意值：

const onChange = (e: ChangeEvent<HTMLInputElement>) {
  setValue(e.target.value as any);
}

效果很好，但我是否缺少确保这种类型安全的东西？

Answer 1

通常，您需要将变量设置为字符串，以便一切正常运行。

然后，当您要将其用作数字时，请在那一点进行转换。您可以使用+value或parseFloat(value)

轻松地将其转换为数字

输入使用字符串类型是有原因的。这样，您就可以保持打字稿所提供的类型安全性。

如何处理打字稿中的数字输入？

1 个答案: