react中使用Knob - Dial

 

1、添加js插件

<script src="/js/jquery-3.1.1.min.js"></script>
<script src="/js/jquery.knob.js"></script>

2、在render中添加html代码

   

<div className="m-r-md inline">
    <input type="text" value="25" onChange={this.slide} className="dial m-r" data-fgcolor="#337ab7" data-width="85" data-height="85"/>
</div>

3、在componentDidMount方法中写slide方法：

componentDidMount: function () {
        $(".dial").knob(
            {
                release:this.changeValue
            }
        );
    },

4、拖动结束后值返回：

 changeValue:function(v){
        console.log(v);
    },