通過滑塊更改輸入值時設置狀態-ReactJS

Question

所以我正在使用此Foundation滑塊： 單擊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（）之類的方法監聽輸入值的更改，並將其設置為設置狀態的函數，從而使用更新后的值調用render函數。 問題在於，只有在用戶輸入該值並且當它被滑塊更改時，它才會調用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