e.preventDefault 在 onChange 事件中不起作用，React

Question

我正在尝试将输入类型从数字更改为文本，但我希望用户只能输入数字、点或逗号。我编写了 onChange 处理程序，用于检查输入是否仅包含允许的符号并删除所有不包含的符号。在本地它运行良好，但在项目中仍然可以输入输入字母和其他符号。似乎 return 和 e.preventDefault 在那里不起作用。

不起作用的项目代码：

const onChangeMin = (e: React.FormEvent<HTMLElement>) => {
    const node = e.target as HTMLInputElement;

    clearTimeout(timeOut);
    const parent = node.closest('.aside-filters')!.getBoundingClientRect().top;
    const element = node.getBoundingClientRect().top;
    setShowButton(true);
    setTopButton(element - parent);

    timeOut = setTimeout(() => {
      setShowButton(false);
    }, 7000);

    if (node.value.match(/[^0-9.,]/g)) {
      return;
    } else {
      setMinValue(node.value.replace(',', '.'));
    }
  };

运行良好的本地代码：

const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.value.match(/[^0-9.,]/g)) {
            e.preventDefault()
        } else {
            setValue(e.target.value.replace(',', '.'));
        }
    }

问题出在异步超时上吗？我该如何解决这个问题？

Answer 1

[顺便说一句，你的例子并不是最小的，因为我们不关心父级、元素或 showButton 和 topPosition。]

return

这里不会做任何事情，只是停止运行函数的其余部分，这里什么也不做。您的代码相当于：

if (!node.value.match(/[^0-9.,]/g)) {
  setMinValue(node.value.replace(',', '.'));
}

如果您想阻止用户键入不同的字符，您可以做的事情可能接近于：

node.value = node.value.replace(/[^0-9.,]/g, '');
setMinValue(node.value.replace(',', '.'));

或者，如果您想让他们输入其他字符，但为了您的操作而删除它们，只需：

setMinValue(node.value.replace(/[^0-9.,]/g, '').replace(',', '.'));