添加 rc-slider 的导航按钮 - 反应

Question

我正在尝试使用此滑块与 rc-slider 做出反应。 但我无法在标记上添加按钮“-”和“+”。

我尝试使用标记，但标记不接受道具的值。

我的 min={} 和 max={} 的值是动态的，那么 - 和 + 的值应该等于 minValue(min) 和 ma​​xValue(max).

这是我的代码，但标记不起作用。

<Slider
      min={minValue}
      max={maxValue}
      step={simulationType === 'type' ? 100 : 5000}
      onChange={this.props.onChange}
      defaultValue={this.props.value}
      marks={{minValue:'-', maxValue: '+'}} 
    />

Answer 1

我认为你使用了marks 错误。它们用于仅添加有关特定值的指示。我不认为它们应该像您想要的那样进行交互。您可以添加 2 个按钮来为您完成这项工作。并将其与滑块挂钩。

我是这样实现的：

function SliderWrapper({ max, min, step }) {
  const [value, setValue] = useState(min);
  return (
    <>
      <button onClick={() => setValue(Math.max(0, value - 10))}>-</button>
      <Slider
        onChange={value => setValue(value)}
        value={value}
        step={step}
        min={min}
        max={max}
      />
      <button onClick={() => setValue(Math.min(100, value + 10))}>+</button>
    </>
  );
}

您可以在此处查看实际实现：https://codesandbox.io/s/1y1lzvxm6l。我使用了useState React 钩子，但如果需要，您可以使用state 将其实现为类组件。