实现范围与数字输入绑定的滑块

Question

我正在使用 antd 滑块组件。我正在尝试实现一个范围滑块，它也与两个数字输入绑定，如下图

在给定的 link https://codesandbox.io/s/icy-framework-xpvl9 中找到我的代码。在将范围道具添加到滑块组件时，它会抛出错误。我对在与范围滑块绑定的数字输入中实现最小值和最大值的逻辑感到困惑。

        <Slider
          className="slider-main-div"
          min={min}
          max={max - 1}
          onChange={this.onChange}
          value={typeof inputValue === "number" ? inputValue : 0}
        />
        <div className="range-input-number-main">
          <InputNumber
            className="min-input-main"
            min={min + 1}
            max={max - 1}
            value={inputValue}
            onChange={this.onChangeMin}
          />
          <span className="range-span">to</span>
          <InputNumber
            className="min-input-main"
            min={21}
            max={50}
            value={inputValue}
            onChange={this.onChangeMax}
          />

Answer 1

我修改了您确定 Input 的 max/min 值的方式，并添加了 ant design 为 [=15] 提供的 range 属性 =].我还删除了 this.state.inputValue，因为似乎不需要它。

这是更新后的 Slider 和 range。

<Slider
          className="slider-main-div"
          min={0}
          max={100}
          onChange={this.onChange}
          range={true}
          defaultValue={[min, max]}
          value={[min, max]}
        />

您当前的操作方式导致了堆栈大小错误，因为您将组件本身的 max/min 值重新分配给 this.state.min 和 this.state.max。因此，当您更改 App 状态时，antd 组件会在渲染中更新它们的初始化道具，然后在 App 状态更改后重新渲染时更新 antd 组件的状态，从而导致堆栈深度错误。

我最终给了它们 0-100 之间的默认值，并在函数中写了一个条件来确定何时设置状态。例如，在 onChangeMin 中，仅当 value 小于 this.state.max 时才设置状态。否则不要设置状态。这样 min 的输入值永远不会超过 max 的输入值。

 onChangeMin = value => {
    if (this.state.max > value) {
      this.setState({ min: value });
    }
  };

与 onChangeMax 相同，但这次将 value 与 this.state.min 进行比较，并确保不小于 value。

 onChangeMax = value => {
    if (this.state.min < value) {
      this.setState({ max: value });
    }
  };

您可以找到完全更新的代码 here。

实现范围与数字输入绑定的滑块

Implementing slider with range binded with the number input

javascript

reactjs

antd

rc-slider