antd Slider 动态设置value后拖拽不了，如何解决

Question

我想动态设置slider 的value值，但是设置了value就拖拽不了了，如何解决？

<Slider
    tipFormatter={value => `${value}%`}
    defaultValue={scale * 100}
    value={scale * 100}
    step={5}
    min={10}
    max={100}
    onAfterChange={value => {
      this.sliderChanged(value);
    }}
  />
                  
                  
sliderChanged = value => {
    this.props.setCanvas(
      Map({
        scale: value / 100
      })
    );
  };

Answer 1

此时组件还不是个受控组件，value值固定了。添加个 onChange 属性。
如果scale是props的属性，声明个state值，比如currentSlider，赋值为scale。

<Slider
    tipFormatter={value => `${value}%`}
    defaultValue={scale * 100}
    value={scale * 100}
    step={5}
    min={10}
    max={100}
    onAfterChange={value => {
      this.sliderChanged(value);
    }}
    onChange={this.handleChange}
/>

handleChange = (value) => this.setState({
    scale: value
})

---

看你代码逻辑，已经设置了defaultValue 没必要自己控制value了。在onAfterChange里拿到的value就是当前 Slider 的值了。

Answer 2

请理解 受控组件 和 非受控组件 的区别。

你设置了这个组件value值，那么你想要改变他，你就需要改变value，通过组件提供的onChange方法去改变它。