4

我在我的 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>      
    )
  }
}

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

4

2 回答 2

4

您可以将滑块值存储在状态中，并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}€&lt;/span>}
        />
      </div>
    );
  }
}
于 2018-07-12T16:53:44.597 回答
-1

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

于 2020-08-28T22:02:28.710 回答