入力値がスライダーで変更されたときの状態を設定する - 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（）のようなものを使って入力値に加えられた変更を聴いて、状態を設定する関数に設定して、render関数を更新された値で呼び出すことです。問題は、これは、ユーザーが値を入力し、スライダで変更されているときにonChange（）や他の関数を呼び出さない場合にのみ機能することです。ここに私のコードは次のとおりです。トリガされることになっています

機能：

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

Insideは、機能をレンダリング：

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