Question

我正在使用反应rc-slider。我想添加工具提示以显示我跟随rc-slider github post的当前值。但是我的滑块位置固定了。一旦工具提示出现，它就不会消失。我的滑块看起来像这个

相关代码如下

const handle = () =>(

       <Tooltip
      prefixCls="rc-slider-tooltip"
      overlay={this.props.value}
      visible={true}
      placement="top"
      key={0}
    >
      <Handle value={this.props.value}  />
    </Tooltip>

我的渲染是

    return (

      <Slider
        min={this.props.minValue}
        max={this.props.maxValue}
        marks={marks}
        disabled={this.props.disabled}
        step={this.props.step}
        onChange={this.updateValue.bind(this)}
        value={this.props.value}
        handle={handle}
       // tipFormatter={value => `${value}%`}
        onAfterChange={value => this.props.updateValue(value)}
      />
)

请帮助我如何改善这个

Answer 1

我最终使用下面的createSliderWithTooltip rc-slider是我的更新代码

import Slider, { createSliderWithTooltip } from 'rc-slider';

const SliderWithTooltip = createSliderWithTooltip(Slider);
 <SliderWithTooltip
        min={this.props.minValue}
        max={this.props.maxValue}
        marks={marks}
        disabled={this.props.disabled}
        step={this.props.step}
        onChange={this.updateMixValue.bind(this)}
        value={this.props.value}
              onAfterChange={value => this.props.MixValue(getValues(value))}
      />

并在scss文件中添加了这样的

  .rc-slider-mark{
                padding-top:7px;
            }
            .rc-slider-step{
                span{
                    background-color: rgb(44, 71, 112);
    border-color: rgb(44, 71, 112);
                }
            }
            .rc-slider-handle{
                background-color: #5bc0de;
                border-color: #5bc0de;
            }

如何在rc-slider中格式化工具提示

1 个答案: