JavaScript 输入不允许小数

Question

我的页面上有这个设置，如果输入为空，则自动将输入设置为 0。但是，输入不允许我输入[或识别]一个decimal/dot。知道为什么会发生这种情况以及如何解决这个问题吗？

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 块它应该工作。

编辑 - 根据评论

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

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

但你不能拥有的是，当输入为空时（如在你的 if 块中），使输入始终设置为 0，并且没有 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) 
    }

JavaScript 输入不允许小数

JavaScript Input not allowing decimals

html

javascript

input

reactjs