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

Question

我在 React 应用程序上安装了 rc-slider React 组件，但我需要从滑块输出当前值，我该怎么做？这是当前的代码：

\n\n

import React from 'react';\nimport 'rc-slider/assets/index.css';\nimport 'rc-tooltip/assets/bootstrap.css';\nimport Slider from 'rc-slider';\n\nconst createSliderWithTooltip = Slider.createSliderWithTooltip;\nconst Range = createSliderWithTooltip(Slider.Range);\n\nexport class RangeSlider extends React.Component {\n  render() {\n    return (\n      <div>\n        <Range min={0} max={10000} defaultValue={[800, 3000]} tipFormatter={value => `${value}\xe2\x82\xac`} />\n      </div>      \n    )\n  }\n}\n

\n\n

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

\n

Answer 1

您可以将滑块值存储在状态中，并onChange在滑块值发生变化时使用 prop 来更新滑块值。

\n\n

给出的函数tipFormatter还可以返回 JSX 以及字符串，因此您可以添加自定义className并更改该类的字体系列。

\n\n

例子

\n\n

export class RangeSlider extends React.Component {\n  state = { sliderValues: [800, 3000] };\n\n  handleChange = sliderValues => {\n    this.setState({ sliderValues });\n  };\n\n  render() {\n    const { sliderValues } = this.state;\n    return (\n      <div>\n        {sliderValues[0]} - {sliderValues[1]}\n        <Range\n          min={0}\n          max={10000}\n          onChange={this.handleChange}\n          defaultValue={sliderValues}\n          tipFormatter={value => <span className="tooltip">{value}\xe2\x82\xac</span>}\n        />\n      </div>\n    );\n  }\n}\n

\n