如何禁用鼠标滚轮在 React 中输入的“数字”类型上滚动？

Question

我正在使用 MUI type="number" 文本字段，但是当我聚焦它然后滚动鼠标滚轮时，输入值会发生变化。我读过有关在滚动后添加模糊的信息，但我不想模糊该字段。我也读过关于再次添加 Blur 和 Focus 的内容，但行为还不够好。

有人可以帮助我吗？多谢！ :)

我正在使用 React 18 和 MUI v5.

要重现此行为，您可以转到 https://mui.com/material-ui/react-text-field/，单击类型编号文本字段，然后滚动该字段。您将看到值如何变化。

我试过使用模糊和聚焦，但这种行为还不够好

Answer 1

用

onKeyUp

代替

onChange

onKeyUp 不会随着你滚动鼠标而触发

 onKeyUp={(e) => {
     console.log(e.key)
     console.log(e.target.value)
 }}

Answer 2

我在 SurveyJS 上遇到了这个问题，下面有两种解决方法！

const scrollableElements = 
 document.querySelectorAll('input[type="number"]');
    scrollableElements.forEach((item: HTMLElement) => {
      item.addEventListener("wheel", (e: any) => {
    e.preventDefault();
    return false;
  });
 });

const scrollableElements = 
 document.querySelectorAll('input[type="number"]');
 scrollableElements.forEach((item: HTMLElement) => {
  item.setAttribute("onwheel", "return false");
 });

Answer 3

最好的解决方案是使用

type={'text'}

TextField，然后添加排除非数字输入的 inputProps

<TextField inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }} />

如 MUI 文档所示：https://mui.com/material-ui/react-text-field/