我正在为我的项目从此处使用Range组件:
https://www.npmjs.com/package/rc-slider
范围上标记了4个值:min
值,middle
中的一个(假设)随机值,max
值currentlyChosenValue
。
要求为此滑块引入steps
,以便
用户在拖动滑块时,只会看到以currentlyChosenValue
舍入到最接近的10的值,
当用户按下左右箭头键时,只会看到四舍五入到10的数值。
我无法使用为定义的step
属性,因为我的min
,max
和middle
值是相当随机的(它们没有四舍五入)。
因此,我定义了一个对值onChange
进行四舍五入的函数-它对于点#1正常工作(例如,当所选值接近min
时四舍五入为min
)。
但是,当用户按下向左/向右箭头键时,滑块将尝试向左/向右移动一个步骤-该步骤将四舍五入为原始值==>滑块最终将不会移动。我找不到为我的Range定义单独的onKeyDown
事件的方法,我尝试添加带有onKeyDown的Handle
-但我的函数从未触发过。
import { Handle, Range } from "rc-slider";
const handle = props => {
const { value, ...restProps } = props;
const change = event => {
// was never triggered
console.log("a key was pressed", event);
};
return <Handle value={value} onKeyPress={change} {...restProps} />;
};
<Range
handle={handle}
value={[min, middle, currentlyChosenValue]}
min={min}
max={max}
onChange={memoizedOnChange}
/>
最佳答案
由于<Handle/>
是组件,因此您要将onKeyPress={change}
传递为道具。
您可以在<Handle/>
周围包裹一个div并将onKeyPress={change}
放在该div上。
您还希望在执行此操作时将tabIndex="0"
用作属性。此链接讨论原因:
onKeyDown event not working on divs in React
return (
<div onKeyPress={change} tabIndex="0">
<Handle value={value} {...restProps} />;
</div>
)