在范围滑块上显示工具提示的 React 方式是什么？

Question

什么是 ReactJS 将输入类型范围的当前值显示为滑块滑块上的工具提示。

我知道可以使用 jQuery 插件来完成，但我想避免使用插件。首选纯 React+HTML+CSS。 Javascript/jQuery可以使用，但需要避免使用插件。

Answer 1

var InputRange = React.createClass({
    getInitialState: function() {
      return {
        points: 5
      };
    },
    handleChange: function(e) {
      e.preventDefault();
      this.setState({points: e.target.value});
    },
    render: function() {
        return <input 
          type="range" 
          name="points"
          min="0" 
          max="10"
          title={this.state.points}
          value={this.state.points}
          onChange={this.handleChange} />;
    }
});

您可以像上面那样做类似的事情。 Fiddle here.

在范围滑块上显示工具提示的 React 方式是什么？

What is the React way of displaying a tooltip on range sliders?

html

css

reactjs