如果用户清除输入，则防止范围滑块重置

Question

我有一个带有输入框的范围滑块。到目前为止，我基本上可以正常工作，但如果用户清除框中的输入，我需要拇指滑块不要在中间重置。如果用户清除输入，我希望滑块保持在当前位置。

如果用户清除并输入

这是 CodeSandbox

Answer 1

这是一个有点高级的解决方案，但您可以使用 lodash 中的 debounce（或编写您自己的 debounce 函数，但使用包代替）

您可以做的是对滑块的用户输入进行 debounce
在输入组件的“onChange”上，对状态中的滑块值进行反跳更新，并检查输入是否为空/未定义/空，然后不要更新状态:)

我要休息一下工作，但如果你需要我提供确切的代码，我可以这样做^-^

Answer 2

我不清楚你真正想做什么。因为假设最小值是 40，并且用户使用退格键清除文本框：第一次是 4，第二次按退格键时它将为空。您希望滑块保持在 40 还是 4？

在任何情况下，您都可以保留先前状态的最小/最大值，并且如果文本框的新值为空，则不要更新滑块状态。

Answer 3

可以分别控制input和slide的值，这样会方便很多，而且符合React的state控制。

代码片段示例

    const [min, setMin] = useState({ input: 0, slide: 0 });
    const [max, setMax] = useState({ input: 100, slide: 100 });

    const handleMaxChange = (e) => {
    const v = parseInt(e.target.value, 10);
    if (v) {
      if (v < min.input && !!min.input) {
        setMax({ input: min.input + 1, slide: min.slide + 1 });
      } else if (v > extremeMax) {
        setMax({ input: extremeMax, slide: extremeMax });
      } else {
        setMax({ input: v, slide: v });
      }
    } else {
      setMax((prev) => ({ ...prev, input: "" }));
    }
  };

完整代码示例

Answer 4

您可以像这样简单地设置滑块：

<MultiRangeSlider
      minVal={min ? min : 0}
      maxVal={max ? max : 0}
      ...
/>

CodeSandbox 上的演示。