代码之家 › 专栏 › 技术社区 › soalrib

如何从RC滑块反应组件输出电流值?

react-component react-native reactjs javascript

3

soalrib · 技术社区 · 8 年前

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

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

1 回复 | 直到 8 年前

1

2

Tholle 8 年前

您可以在状态中存储滑块值并使用 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>
    );
  }
}