滚动行为与 React 不同-6ren"> 滚动行为与 React 不同-import React from 'react'; import { render } from 'react-dom'; const App = () => ( ); render(, do-6ren">
gpt4 book ai didi

html - <input type ="number"> 滚动行为与 React 不同

转载 作者:行者123 更新时间:2023-12-04 17:48:16 24 4
gpt4 key购买 nike

import React from 'react';
import { render } from 'react-dom';

const App = () => (
<input
type="number"
min={0}
max={99999}
step={1}
/>
);

render(<App />, document.getElementById('root'));

Edit rr0qj41omq

如果我聚焦输入框并输入一个数字,我可以在将鼠标悬停在输入框上时使用鼠标滚轮来更改数字。

但是,当我创建包含以下内容的 .html 文件时,我不能可以通过滚动更改数字。知道是什么原因吗?

<!DOCTYPE html>
<html>
<body>
<input
type="number"
min={0}
max={99999}
step={1}
/>
</body>
</html>

最佳答案

看起来滚动行为取决于是否有 onWheel 处理程序。在页面上呈现两个输入时有区别:

<input id="input1" type="number" min="0" max="99999" step="1">
<input id="input2" type="number" min="0" max="99999" step="1" onwheel="">

此处 input2 在鼠标滚轮上递增/递减其值,但 input1 不会。

由于 React 将其自己的事件处理程序附加到 dom 元素,输入启用了此鼠标滚轮增量功能,并且与纯 HTML 页面相比表现不同。

关于html - &lt;input type ="number"> 滚动行为与 React 不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47233145/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com