Question

修改：根据要求输入整个代码。原版有一些变化。

我正在尝试使用react和ES6的基础滑块。当滑块移动时，它应该是emit a moved.zf.slider event。 React应该能够bind to custom events。我的代码：

//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()永远不会被调用。

我做错了什么？

Answer 1

我相信你误导了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);
}

将moved.zf.slider（Zurb Foundation）绑定到React函数

1 个答案: