Reactカスタムコンポーネント - ボタン - OnClickイベントでJQueryプラグインを呼び出します。

Question

カスタムReactボタンのclickイベントにlegitRipple.jsを追加します。 legitRipple JSへ リンク：ここhttps://matthias-vogt.github.io/legitRipple.js/

は私の案ですが、それが動作していない - 私は（.rippleするクリックイベントや参照をリンクする方法がわからない）イベント

Button = class Button extends React.Component { 
    constructor(props) { 
    super(props); 
    this.onClick = this.onClick.bind(this); 
    this.state = { 

    }; 
    } 
    componentDidMount() { 
    //need to add JQuery function - on button click, I need to register an event? or somehow call (ref=buttonEl) $(buttonEl).ripple(); 

    } 

//do I need an componentWillUnmount as well? 

    onClick(ev) { 
    let onClickFn = this.props.onClick; 
    onClickFn && onClickFn(ev); 
    //somehow register an event to show the ripple? 
    } 
    render() { 
    return (
     <div> 
     <button type="button" ref="buttonEl" className={this.props.className} onClick={this.onClick.bind(this)}> 
      {this.props.children} 
     </button> 
     </div> 
    ); 
    } 
} 

Answer 1

することができますthis.refs.buttonElを使用してボタン要素にアクセスし、$(this.refs.buttonEl).ripple()を実行してその要素にリップルハンドラをインストールできるようにする必要があります。

ドキュメントからは、クリックすると要素が自動的に波打つように見えます。それを実現させるためにonClick中に何かを呼び出さなければならないように見えません。

componentWillUnmountには$(this.refs.buttonEl).ripple({unbind: true});を設定します。また、componentWillUpdateの間にイベントハンドラを削除し、componentDidUpdateの間にそれを添付する必要があります。