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

Question

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

此外，如何在捕获 slider 的 handle 时从显示值的工具提示中更改字体系列？

Answer 1

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

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