移動した.zf.slider（Zurb Foundation）をReact関数にバインドします。

Question

を編集します。要求通りにコード全体を入力します。オリジナルからいくつかの変更があります。

リアクションとES6で基礎スライダを使用しようとしています。スライダが動くと、emit a moved.zf.slider eventとなっています。反応はbind to custom eventsになるはずです。私のコード：私のブラウザのコンソールで$("#sliderOutput1").val()を実行することにより

//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; 

私はスライダーを動かすと、非表示の入力の値が変化していることがわかります。しかし、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); 
 
}