如何从 rc-slider react 组件输出当前值？

Question

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

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>      
    )
  }
}

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

Answer 1

您可以将滑块值存储在状态中，并使用 onChange 属性在滑块值更改时更新它们。

给tipFormatter的函数也可以returnJSX和一个字符串，所以你可以添加自定义className并改变那个[=22=的字体系列].

例子

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>
    );
  }
}

Answer 2

出于某种原因，您的代码的最后一部分对我不起作用，因为我试图让范围工具提示正确设置动画并显示正确的数据。我不得不安装旧版本的 rc-slider (8.7.1) 以修复在 post 时当前损坏的工具提示动画。使它与旧版本一起正常工作的代码修复是： ... tipFormatter={值=> ${value}} tipProps={{visible: true}} ...

如何从 rc-slider react 组件输出当前值？

How to output current values from the rc-slider react component?

javascript

reactjs

react-native

react-component