如何为 Range 添加 onKeyDown 事件？

Question

我在我的项目中使用 Range 组件： https://www.npmjs.com/package/rc-slider

范围内标记了 4 个值：

• min 值，
• middle 中的一个（比方说）随机值，
• max 值
• currentlyChosenValue。

要求是为这个滑块引入steps，这样

1. 用户在拖动滑块时只会看到四舍五入到最接近 10 的值currentlyChosenValue，
2. 当用户按下左右箭头键时，他只能看到四舍五入到最接近 10 的值。

我无法使用为 定义的step 属性，因为我的min、max 和middle 值非常随机（它们不是四舍五入的）。 Therefore, I defined a function which rounds the values onChange - it works properly for point #1 (e.g. rounding to min, when selected value is close to 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}
  />

Answer 1

由于<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>
)

Answer 2

您可以在 Range 组件周围包裹一个 div 并在那里监听关键事件。