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的函数还可以返回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>
    );
  }
}

Answer 2

由于某种原因，您的代码的最后一部分对我不起作用，因为我试图获取范围工具提示以正确设置动画并显示正确的数据。我必须安装旧版本的rc-slider（8.7.1）才能修复在发布本文时当前断开的工具提示动画。使用旧版本可以正常运行的代码修复为： ... tipFormatter = {值=> ${value}} tipProps = {{visible：true}} ...

如何从rc-slider反应组件输出电流值？

2 个答案: