Setzen Sie den Zustand, wenn der Eingabewert durch einen Schieberegler geändert wird - ReactJS

Question

Also verwende ich diesen Foundation-Schieberegler: click for doc. Um empfehlen sie aktuellen Wert des für den Zugriff auf Schieber verdeckter Eingabe wie folgt:

<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> 

Was ich will ist, den Wert tun Anzeige neben dem Schieberegler eine Variable. Meine Idee ist es, Veränderungen am Input-Wert mit etwas wie onChange() zu hören und es auf eine Funktion zu setzen, die den Zustand so einstellt, dass die render-Funktion mit einem aktualisierten Wert aufgerufen wird. Das Problem ist, dass dies nur funktioniert, wenn der Benutzer den Wert eingibt und wenn er durch den Schieberegler geändert wird, ruft er weder onChange() noch irgendeine andere Funktion auf, die ich ausprobiert habe. Hier ist mein Code:

Funktion, die ausgelöst werden soll ist:

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

Innen Render-Funktion:

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> 

ich versuchte, indem onClick, OnMove Funktionen auf dem Schieber selbst und es funktioniert, aber ich möchte, dass die Funktion nur aufgerufen wird, wenn der Schieberegler Wert geändert wird

Irgendwelche Ideen?

Answer 1

Entsprechend seiner Dokumentation können Sie das Ereignis "move.zf.slider" abhören.

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

Oder Sie können den Schieberegler auf den externen Eingang binden und den Wert des Eingangs erhalten:

<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> 

Referenz: http://foundation.zurb.com/sites/docs/slider.html#js-events