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

【问题标题】：how to format tooltip in rc-slider如何在 rc-slider 中格式化工具提示
【发布时间】：2017-09-05 18:00:43
【问题描述】：

我正在使用反应 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)}
      />
)

请帮助我如何改进这一点

【问题讨论】：

控制台有错误吗？
如果我使用Range，但slider没有

标签： javascript reactjs slider

【解决方案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;
            }

【讨论】：