react와 plot.ly가있는 .on과 addEventListener의 차이점

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가 작동하지 않는 것처럼 보입니다. this.refs.chart의 참조를 확인했으며 올바른 것입니다. 콘솔에서 잡는 것과 동일]

내 구성 요소에서 plotly_selected 이벤트를 어떻게 사용할 수 있습니까? 또한 단순히 componentDidMount에 .on 이벤트를 추가하고 콘솔에서와 같은 방식으로 작동시키지 못하는 이유는 무엇입니까?

Answer 1

Plot.ly API에는 차트의 DOM 노드가 필요하므로 Ref를 전달하면 충분하지 않습니다. 이것이 모범 사례라면 100 % 확신 할 수는 없겠지만 쉬운 수정은 Ref에 .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>