我在React app中有一个受控号码输入,当我删除小数点右边的所有数字时,小数点本身被删除 . 所以,当我有 1.1
,并删除最右边的1时,它应该留下 1.
;但该点也会自动删除,留下 1
,光标移动到前面 .
对于一个最小的例子,请看这个小提琴:https://jsfiddle.net/sashee/e00s7h9d/ . 只需在输入上按退格键即可观察行为 .
经过一些谷歌搜索,我认为问题的根源是 1.
被视为 1
,并且无法从输入中提取当前值 .
因此,当我删除最右边的1时,会发生以下情况:
-
调用更改处理程序
-
该值为1
-
React将状态中的值更新为1
-
输入现在的值为1,而不是1 .
正如我所看到的,这不是一个错误,而是一个奇怪的架构结果 . 有没有使用数字输入的变通办法?或者我应该回到常规文本输入?
Update :
它适用于Firefox,但不适用于Chrome .
3 回答
事实证明这是React本身的一个错误,请参阅this PR .
它从15.5.4开始修复,见this fiddle:
问题是你将
input
定义为type="number"
但是你把它扔进一个字符串的值 . 当字符串"1."
转换为数字时,它将丢失小数值 .怎么修:
正如@Yo Wakita在他的回答中所说,只需使用字符串输入 . 然而!您可以使用RegEx轻松禁止非数字:
当你删除小数点前的数字时,你是否有理由想要使用小数?这不是一个React问题,因为它更像是一般的HTML问题 . 就像你提到的那样,如果你想在输入数字时显示小数点,那么你可以将
type="number"
更改为type="text"
.另外,我想指出在初始状态下,您将值设置为字符串,然后字符串
"1.1"
被强制转换为数字1.1
. 为了保持一致性,如果输入为type="number"
,则应将初始状态设置为数字,或将初始状态保持为字符串并将输入更改为type="text"
如果您希望每次按下向上或向下箭头时框中的数字增加或减少0.1,请将
step
更改为step="0.1"
.