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

时间:2015-03-13 09:31:25

标签: html5 css3 reactjs

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

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

1 个答案:

答案 0 :(得分:3)

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

你可以像上面那样做类似的事情。小提琴here