Question

我有一个自定义组件，用于监听事件，如果检测到则调用回调函数。

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();
    }

在render方法中，我正在设置ref，就像这样

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

如果我尝试访问ref上的componentDidMount我无法确定为什么它无法在addEventListener回调中获得相同内容，因为此回调将是基于某些用户操作触发，这些操作肯定会在componentDidMount之后触发。

所以this.refs.highChart即将null。

请帮我解决这个问题。

感谢。

Answer 1

您可以尝试将回调作为ref道具的值，如下所示：

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

然后在处理程序中：

this.highChart.chart.reflow();

无法在addEventListener回调函数

1 个答案: