[英]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.