0

我想动态设置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
      })
    );
  };

clipboard.png

Awbeci 2k
2019-09-27 提问
2 个回答
0

已采纳

此时组件还不是个受控组件,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 的值了。

0

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

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

撰写答案

推广链接