添加RC滑块导航按钮-反应

Question

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

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

我的min = {}和max = {}的值是动态的，因此-和+的值应等于 minValue（min）和 maxValue（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将其实现为类组件。