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
}

或者您可以将滑块绑定到外部输入并获取input：

的值

<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

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

1 个答案: