Javascript 如何从rc滑块组件输出当前值？

我在我的React应用程序上安装了rc slider React组件，但是我需要从slider输出当前值，我该怎么做？这是当前代码：

import React from 'react';
import 'rc-slider/assets/index.css';
import 'rc-tooltip/assets/bootstrap.css';
import Slider from 'rc-slider';

const createSliderWithTooltip = Slider.createSliderWithTooltip;
const Range = createSliderWithTooltip(Slider.Range);

export class RangeSlider extends React.Component {
  render() {
    return (
      <div>
        <Range min={0} max={10000} defaultValue={[800, 3000]} tipFormatter={value => `${value}€`} />
      </div>      
    )
  }
}

从“React”导入React；
导入“rc slider/assets/index.css”；
导入“rc tooltip/assets/bootstrap.css”；
从“rc滑块”导入滑块；
const createSliderWithTooltip=Slider.createSliderWithTooltip；
const Range=createSliderWithTooltip（Slider.Range）；
导出类RangeSloider扩展React.Component{
render（）{
返回(
`${value}€`}/>
)
}
}

---

此外，如何从抓取滑块手柄时显示值的工具提示中更改字体系列？

您可以将滑块值存储在状态中，并在滑块值更改时使用

onChange

道具更新滑块值

赋予

tipFormatter

的函数还可以返回JSX和字符串，因此您可以添加自定义

className

并更改该类的字体系列

示例

export class RangeSlider extends React.Component {
  state = { sliderValues: [800, 3000] };

  handleChange = sliderValues => {
    this.setState({ sliderValues });
  };

  render() {
    const { sliderValues } = this.state;
    return (
      <div>
        {sliderValues[0]} - {sliderValues[1]}
        <Range
          min={0}
          max={10000}
          onChange={this.handleChange}
          defaultValue={sliderValues}
          tipFormatter={value => <span className="tooltip">{value}€</span>}
        />
      </div>
    );
  }
}

导出类RangeSlider扩展React.Component{
state={sliderValues:[8003000]}；
handleChange=sliderValues=>{
this.setState（{sliderValues}）；
};
render（）{
const{sliderValues}=this.state；
返回(
{sliderValues[0]}-{sliderValues[1]}
{价值}€}
/>
);
}
}

由于某些原因，您代码的最后一部分不适用于我，因为我正在尝试获取范围工具提示以正确设置动画并显示正确的数据。我必须安装一个旧版本的rc slider（8.7.1）来修复工具提示动画，该动画在本文发布时被破坏。使旧版本能够正常运行的代码修复程序是： ... tipFormatter={value=>

${value}

} tipProps={{visible:true}

---

…

老实说，我不记得我用的是什么版本，但由于这个问题已经在2018年提出，所以肯定是rc slider的旧版本，而且当时它对我很有效：）