为什么我们可以使用鼠标滚轮更新数字输入的值?

IT技术 reactjs
2022-07-29 23:53:25

为什么可以input[type="number"]在 React 中使用鼠标滚轮而不是在纯 HTML 中更新 a 的值?

react:https ://codesandbox.io/s/festive-morse-l28c7或https://jsfiddle.net/nm53bavd/

HTML:https ://codesandbox.io/s/beautiful-davinci-il8rn?file=/src/index.js

秘诀是什么?在 github 上的react文档或相关react问题中找不到任何提示。

我想在全球范围内摆脱它,找到了一些有用的东西,比如

onWheel={event => event.target.blur()}

但是无论如何,如果这在任何地方都没有记录(如果我错了,请纠正我)并且它与 HTML 的当前默认行为不同,如果打开错误票证以在react本身中修复此问题?

1个回答

React DOM 元素是 HTML 元素的跨浏览器实现。

您可以在文件中找到input实现。ReactDOMInput.js

因此,“秘密”是添加车轮事件实现的背后。

您无法在全局范围内“摆脱它”,因为您无法开箱即用地编辑 DOM 元素实现。

InputNoWheelEvent因此,您可以使用所需的更改编写自己的自定义组件:

// InputNoWheelEvent
<input onWheel={event => event.target.blur()} {...inputProps}/>