如何清除焦点上的数字输入字段

【问题标题】：How to clear a number input field on focus如何清除焦点上的数字输入字段
【发布时间】：2020-09-16 01:07:07
【问题描述】：

尝试在 React 中创建一个数字输入字段，一旦用户点击输入，初始值就会被清除。现在似乎有文本输入的解决方案，但我还没有看到用数字输入完成。每当我试图解决这个问题时，我总是得到“一个组件正在将类型编号的受控输入更改为不受控制。”有什么建议么？这是一个快速演示 codesandbox demo

【问题讨论】：

【解决方案1】：

清除文本输入只是将其值设置为空字符串。您实际上也可以使用数字输入来执行此操作。（实际上，您存储的值已经是一个字符串，尽管您已将其键入为number | undefined）。

onFocus={() => setCount("")}

【讨论】：

【解决方案2】：

为了将输入的数字设置为特定值，您需要在调用函数“SetCount()”时将其指定为参数，如果您希望默认值为 4，例如：

onFocus={() => setCount(4)}

而现在你只是用 undefined 作为参数来调用它：

onFocus={() => setCount(undefined)}

由于您试图将输入字段的内容设置为未定义，因此代码目前不起作用

【讨论】：