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

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

阅读 646
评论 2019-09-27 提问
    2 个回答
    • 355

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

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

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

        撰写回答

        登录后参与交流、获取后续更新提醒