.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);

它似乎不适用于我的组件代码。

但是，当我尝试在控制台中运行代码时，.on确实无法正常运行addEventListener。 我检查了this.refs.chart的引用，它是正确的（即与我在控制台中获取的引用相同）

如何在组件中使用plotly_selected事件？ 此外，为什么我不能简单地在componentDidMount中添加.on事件并使它像在控制台中那样工作？

Answer 1

由于Plot.ly API需要图表的DOM节点，因此将Ref传递给它是不够的。 我不确定100％是否是最佳做法，但一个简单的解决方法是将.getDOMNode()添加到Ref。 这是一个简单的例子：

 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>