JavaScript输入不允许小数

Question

我在我的页面上设置了这个设置，如果输入为空，则将输入自动设置为0。但是，输入不允许我输入[或识别]小数/点。你知道为什么会发生这种情况吗?

const updateSettings = (e) => {
if(e.target.value === '') {
e.target.value = 0;
} else {
e.target.value -= 0;
}
dispatch({
type: 'UPDATE_SETTINGS',
setting: e.target.name,
value: e.target.type === 'checkbox' ? e.target.checked : e.target.value
})
<input type="text" id="amount" name="amount" value={settings.amount} onChange={(e) => updateSettings(e)} />

非常感谢，谢谢!

Answer 1

问题是，当target.value不为空时，您尝试从中减去0。当您输入的值是.时，这不会被识别为有效操作，因为您正在尝试减去无法解析为数字(.)和数字(0-9)的字符串。

我不知道为什么你需要从target.value减去0。不管怎样，如果你去掉else块，它应该可以工作。

编辑-基于注释

我不确定您的确切用例，但有几种方法可以处理默认为零的输入字段，并让用户用自己的值/s替换它。您可以使用setState并将该状态传递给value属性，也可以使用defaultValue={0}。其中任何一个都允许用户正常更新字段。

或者，您可以将type属性设置为number，这将根据您的要求处理0-9和.。

你不能做的是，使输入总是设置为0，当输入是空的(如在你的if块)，而不是有一个0在开始，因为用户将无法删除它。

Answer 2

感谢@Kerron的反馈，并指出问题发生的原因，然而defaultValue={0}在我的情况下不起作用，这是解决方案，似乎最适合我的场景:

if(e.target.value.charAt(0) == '0' && e.target.value > 0) {
e.target.value = e.target.value.substring(1) 
}