复现步骤:
打开官方demo链接:https://slider-react-component.vercel.app/demo/debug
修改demo代码为:
import Slider from 'rc-slider' ;
import React from 'react' ;
import '../../assets/index.less' ;
export default ( ) => {
const [ disabled , setDisabled ] = React . useState ( false ) ;
const [ range , setRange ] = React . useState ( false ) ;
const [ reverse , setReverse ] = React . useState ( false ) ;
const [ vertical , setVertical ] = React . useState ( false ) ;
return (
< div style = { { transform : 'scale(1.5)' , transformOrigin : 'top left' } } >
< div >
< label >
< input type = "checkbox" checked = { disabled } onChange = { ( ) => setDisabled ( ! disabled ) } />
Disabled
</ label >
< label >
< input type = "checkbox" checked = { range } onChange = { ( ) => setRange ( ! range ) } />
Range
</ label >
< label >
< input type = "checkbox" checked = { reverse } onChange = { ( ) => setReverse ( ! reverse ) } />
Reverse
</ label >
< label >
< input type = "checkbox" checked = { vertical } onChange = { ( ) => setVertical ( ! vertical ) } />
Vertical
</ label >
</ div >
< div style = { { height : 300 , width : 600 } } >
< Slider
onChange = { ( nextValues ) => {
console . log ( 'Change:' , nextValues ) ;
} }
onChangeComplete = { ( v ) => {
console . log ( 'AfterChange:' , v ) ;
} }
min = { 0 }
max = { 1 }
defaultValue = { 0.81 }
step = { 0.01 }
/>
</ div >
</ div >
) ;
} ;
代码块外有滚动条,点击slider,滚动条位置异常
分析到原因:因为在点击组件时,调用了滑块的focus事件导致
20250326-154309.mp4
复现步骤:
20250326-154309.mp4