当输入值被滑块改变时设置状态 - ReactJS
所以我使用这个基础滑块:click for doc。为了访问滑块的当前价值,他们建议使用隐藏的输入,像这样:当输入值被滑块改变时设置状态 - ReactJS
<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功能和它的工作,但我只有当滑块的值发生更改时,才需要调用该功能
任何创意?
根据其文档,您可以收听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
我在哪里可以调用jQuery函数?我试着在ComponentDidMount函数中调用它 - 我做错了吗?第二个选项意味着值正在输入字段中显示,并且您可以控制该值,但在移动滑块时仍不会调用该函数。 – jwm0
@ jwm0 ComponentDidMount函数似乎是正确的。 https://codepen.io/sam_lee/pen/owNppV我没有尝试基于reactjs,但这应该以相同的方式工作。对于第二个选项,我想你可以添加onChange来输入组件。 – SLee
jquery方法奏效!谢谢你,芬妮让它工作。顺便说一句,我创建的页面是一个控制面板,会有很多幻灯片和开关。将所有控件的状态保存在一个组件(类)中还是应该将组件分成更小的组件(一个滑块是一个类)是一个好主意? – jwm0
反应滑块的代码,你可以参考 - HTTPS:/ /github.com/mpowaga/react-slider/blob/master/react-slider.js – vijayst