.onとaddEventListenerの違いはreactとplot.lyです

Question

私はPlot.lyで自分のチャートを含むdivを持っています。 Reactのドキュメントを見ると、私はcomponentDidMountでaddEventListenerを使用することが推奨されていますので、addEventListenerを使用して私のチャートにプロットしたイベントをアタッチしました。しかし

this.refs.chart.addEventListener('plotly_selected', this._lasso_selection);

、私は私のチャートの何もディスプレイ上でいくつかのポイントを選択します。私がしようとした場合同様に：

this.refs.chart.on('plotly_selected', this._lasso_selection);

を私のコンポーネントのコードで動作するようには思えません。

しかし、コンソールでコードを実行しようとすると、addonListenerが機能しないように見えますが、.onは機能しません。私はthis.refs.chartの参照をチェックしており、正しいです。

コンポーネントでplotly_selectedイベントを使用するにはどうすればよいですか？さらに、なぜ単にcomponentDidMountに.onイベントを追加してコンソールでの動作と同じように動作させることができないのですか？

Answer 1

Plot.ly APIにはグラフのDOMノードが必要なため、Refを渡すだけで十分ではありません。私はこれがベストプラクティスであるかどうか100％確信していませんが、簡単な修正は参考文献に.getDOMNode()を追加することです。ここでは簡単な例です：

class Example extends React.Component { 
 
    componentDidMount() { 
 
    const chart = this.refs.chart.getDOMNode(); 
 
    
 
    var data = [ 
 
     { 
 
     x: ['giraffes', 'orangutans', 'monkeys'], 
 
     y: [20, 14, 23], 
 
     type: 'bar' 
 
     } 
 
    ]; 
 

 
    Plotly.newPlot(chart, data); 
 
    chart.on('plotly_hover', this.handleEvent); 
 
    } 
 
    handleEvent() { 
 
    console.log('Event!') 
 
    } 
 
    render() { 
 
    return(
 
     <div ref="chart" id="chart" /> 
 
    ); 
 
    } 
 

 
} 
 

 
React.render(<Example/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.min.js"></script> 
 
<script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script> 
 

 
<div id="View"></div>