Edit : put in entire code as requested. There are a few changes from the original.
I'm trying to use the foundation slider with react and ES6. When the slider moves, it's supposed to emit a moved.zf.slider event . React is supposed to be able to bind to custom events . My code:
//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;
By running $("#sliderOutput1").val()
in my browser's console I can see that when I move the slider, the hidden input's value is changing. However handleSliderMove()
is never getting called.
What am I doing wrong?
I believe you are misusing the refs
property. As defined in the React docs , the refs property should be a callback. So in your case, your component definition would look like
//... <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"> //...
and your lifecycle hooks would look something like this
componentDidMount(){ this.nv.addEventListener("moved.zf.slider", this.handleSliderMove); } componentWillUnmount(){ this.nv.removeEventListener('moved.zf.slider', this.handleSliderMove); }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.