Question

我有一个div，其中包含我在Plot.ly中的图表。看看React文档，建议我在componentDidMount中使用addEventListener，所以我通过addEventListener将我的图表附加到一个plotly事件。

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

然而，当我在我的图表上选择一些点时，没有任何显示。同样，如果我尝试：

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

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

然而，当我尝试在控制台中运行代码时，addEventListener似乎不起作用，而.on确实有效。我已经检查了this.refs.chart的参考，这是正确的[即和我在控制台中抓到的那个相同]

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

.on和addEventListener之间的区别与react和plot.ly

1 个答案: