CODEWITHSUNDEEP
reactjshighchartsaddeventlistener
rahul
rahul

Reputation: 7663

not able to get refs on addEventListener callback function

I have a custom component which listen for an event and if detected call the callback function.

componentWillMount(props){
        this.setState(this.props);
        window.removeEventListener("ReactGridItemResize",this.onReactGridItemResize.bind(this));
        window.addEventListener("ReactGridItemResize",this.onReactGridItemResize.bind(this),false);
    }

onReactGridItemResize(){
        this.refs.highChart.chart.reflow();
    }

in render method I am setting the ref like this

<div className="chart pull-right">
                        <ReactHighcharts ref="highChart" config={chartConfig}/>
                      </div>

if I try to access the same ref on componentDidMount I am able to access that not sure why It is not able to get the same on addEventListener callback because this callback will be fired based on some user action which will be definitely trigger after componentDidMount.

so this.refs.highChart is coming as null.

Please help me out on this.

Thanks.

Upvotes: 0

Views: 1119

Answers (1)

Krasimir
Krasimir

Reputation: 13539

Can you try a callback as a value of the ref prop like so:

<div className="chart pull-right">
  <ReactHighcharts ref={ chart => { this.highChart = chart; } } config={chartConfig}/>
</div>

And then in the handler:

this.highChart.chart.reflow();

Upvotes: 2

Related Questions