如何从 rc 滑块第三方组件中获取最小值和最大值答案

【问题标题】：How can i get the min value and max value from the rc slider third party component如何从 rc 滑块第三方组件中获取最小值和最大值
【发布时间】：2018-04-12 09:34:01
【问题描述】：

如何从 rcslider 第三方组件获取最小值和最大值。api 的 git 链接是 http://react-component.github.io/slider/ 我安装了 rcslider 组件并使用示例代码

import 'rc-slider/assets/index.css';
import 'rc-tooltip/assets/bootstrap.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Tooltip from 'rc-tooltip';
import Slider from 'rc-slider';

const createSliderWithTooltip = Slider.createSliderWithTooltip;
const Range = createSliderWithTooltip(Slider.Range);
const Handle = Slider.Handle;

const handle = (props) => {
  const { value, dragging, index, ...restProps } = props;
  return (
    <Tooltip
      prefixCls="rc-slider-tooltip"
      overlay={value}
      visible={dragging}
      placement="top"
      key={index}
    >
      <Handle value={value} {...restProps} />
    </Tooltip>
  );
};

const wrapperStyle = { width: 400, margin: 50,padding:20 };
class Rangeslider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      min: 0,
      max: 5000,
    };
  }


render(){
  return(
    <div>
  <div>
   
    <div style={wrapperStyle}>
      <p>Range with custom handle</p>
      <Range min={0} max={5000} defaultValue={[0, 5000]} tipFormatter={value => `${value}`} />
    <span>${this.state.min}</span>  
    <span style={{float:"right"}}>${this.state.max}</span>  
    </div>
  </div>
  </div>
  )

}
}

export default Rangeslider

如何从 rcslider 第三方组件获取最小值和最大值。api 的 git 链接是 http://react-component.github.io/slider/

【问题讨论】：

标签： reactjs

【解决方案1】：

我已经习惯了 onChange 函数来改变滑块的最小值和最大值。这解决了我的问题

import 'rc-slider/assets/index.css';
import 'rc-tooltip/assets/bootstrap.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Tooltip from 'rc-tooltip';
import Slider from 'rc-slider';

const createSliderWithTooltip = Slider.createSliderWithTooltip;
const Range = createSliderWithTooltip(Slider.Range);
const Handle = Slider.Handle;

const handle = (props) => {
  const { value, dragging, index, ...restProps } = props;
  return (
    <Tooltip
      prefixCls="rc-slider-tooltip"
      overlay={value}
      visible={dragging}
      placement="top"
      key={index}
    >
      <Handle value={value} {...restProps} />
    </Tooltip>
  );
};

const wrapperStyle = { width: 400, margin: 50,padding:20 };
class Rangeslider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: [0, 5000],
    };
  }


render(){
  return(
    <div>
  <div>
   
    <div style={wrapperStyle}>
      <p>Range with custom handle</p>
      <Range min={0}
            max={5000}
            defaultValue={this.state.value}
            allowCross={false}
            onChange={value=>this.setState({value})} />
    <span>${this.state.value[0]}</span>  
    <span style={{float:"right"}}>${this.state.value[1]}</span>  
    </div>
  </div>
  </div>
  )
}
}
export default Rangeslider

【讨论】：