我正在为我的项目从此处使用Range组件:
https://www.npmjs.com/package/rc-slider

范围上标记了4个值:


min值,
middle中的一个(假设)随机值,
max
currentlyChosenValue


要求为此滑块引入steps,以便


用户在拖动滑块时,只会看到以currentlyChosenValue舍入到最接近的10的值,
当用户按下左右箭头键时,只会看到四舍五入到10的数值。


我无法使用为定义的step属性,因为我的minmaxmiddle值是相当随机的(它们没有四舍五入)。
因此,我定义了一个对值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>
)

10-05 21:04
查看更多