当输入值被滑块改变时设置状态 - ReactJS

Question

所以我使用这个基础滑块：click for doc。为了访问滑块的当前价值，他们建议使用隐藏的输入，像这样：

<div class="slider" data-slider data-initial-start="50" data-end="200"> 
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"> 
</span> 
<span class="slider-fill" data-slider-fill></span> 
<input type="hidden"> 
</div> 

我想要做的就是旁边的滑块使用一些变量显示的值。我的想法是使用类似onChange（）的方法来监听输入值的变化，并将其设置为一个函数来设置状态，从而调用具有更新值的渲染函数。问题在于，这只有在用户输入值以及滑块更改它不调用onChange（）或我尝试的任何其他函数时才起作用。这里是我的代码：

功能即是应该被触发：

onValueChange: function() { 
    this.setState({ 
    setTemp: this.refs.location.value 
    }); 
}, 

内部渲染功能：

var {setTemp} = this.state; 

<div className="controlPanel"> 
    <div className="slider vertical" data-slider data-initial-start={curTemp} data-step="5" data-end="110" data-vertical="true"> 
     <span className="slider-handle" data-slider-handle role="slider" tabIndex="1" onClick={this.onValueChange}></span> 
     <span className="slider-fill" data-slider-fill></span> 
     <input id="tempInput" type="hidden" ref="location" onChange={this.onValueChange}/> 
    </div> 
</div> 
     <div className="currentStats"> 
     Temp: {setTemp} 
     </div> 

我试图在滑块本身添加的onClick，onMove功能和它的工作，但我只有当滑块的值发生更改时，才需要调用该功能

任何创意？

Answer 1

根据其文档，您可以收听moved.zf.slider事件。

$('.slider').on('moved.zf.slider', function() { 
    // update state 
} 

或者你可以绑定滑块外部输入和获得输入值：

<div class="small-10 columns"> 
    <div class="slider" data-slider data-initial-start="50"> 
    <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput1"></span> 
    <span class="slider-fill" data-slider-fill></span> 
    </div> 
</div> 
<div class="small-2 columns"> 
    <input type="number" id="sliderOutput1"> 
</div> 

参考： http://foundation.zurb.com/sites/docs/slider.html#js-events