[英]Binding moved.zf.slider (Zurb Foundation) to React function
编辑 :按要求放入整个代码。 与原始版本相比有一些变化。
我正在尝试使用带有React和ES6的基础滑块。 当滑块移动时,它应该发出move.zf.slider事件 。 React应该能够绑定到自定义事件 。 我的代码:
//React and third party references
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class SearchRangeFilter extends Component {
constructor(props) {
super(props);
this.handleSliderMove = this.handleSliderMove.bind(this);
}
componentDidMount(){
this.nv.addEventListener("moved.zf.slider", this.handleSliderMove);
}
componentWillUnmount(){
this.nv.removeEventListener('moved.zf.slider', this.handleSliderMove);
}
handleSliderMove(){
console.log("Nv Enter:");
}
render() {
return (
<div id="distance-selector-wrapper" className="flex-wrapper">
<div className="range-slider__wrapper">
<div ref={elem => this.nv = elem} className="slider" data-slider data-initial-start="50">
<span className="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput1"></span>
<span className="slider-fill" data-slider-fill></span>
</div>
</div>
<div className="range-slider__value">
<input type="number" id="sliderOutput1" />
</div>
</div>
);
}
}
export default SearchRangeFilter;
通过在浏览器的控制台中运行$("#sliderOutput1").val()
,我可以看到在移动滑块时,隐藏输入的值正在改变。 但是,从未调用handleSliderMove()
。
我究竟做错了什么?
我相信您在滥用refs
属性。 根据React docs的定义,refs属性应该是一个回调。 因此,在您的情况下,您的组件定义看起来像
//... <div className="slider" ref={elem => this.nv = elem} data-slider data-initial-start="500" data-start="0" data-end="5000" data-binding="true" data-draggable="true" data-decimal="0" data-step="10"> //...
而且您的生命周期挂钩看起来像这样
componentDidMount(){ this.nv.addEventListener("moved.zf.slider", this.handleSliderMove); } componentWillUnmount(){ this.nv.removeEventListener('moved.zf.slider', this.handleSliderMove); }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.