前端之家

  1. 首页
  2. 问答

从reactjs的highchart click事件中调用函数

• 问答

我在单独的js文件中有一个摘要页面。在另一个家庭js文件中，我正在使用highchart来显示每个服务的图形，并单击图表中的一个条以显示摘要页面。我是前端开发的新手，并且在一整天的搜索后都发布了此内容。我访问的所有链接都建议如何在单击事件时访问外部链接或警告或调用同一文件内的组件功能。但不是我想要的。

我在主页上的Highchart图摘要选项：

 plotOptions: {
                        bar : {
                          stacking: 'normal',dataLabels: {
                            enabled: true,format: '{point.y}',color: 'black'
                          },states: {
                              hover:{
                                enabled: true,brightness: -0.3
                              }
                            },cursor: 'pointer',events:{
                                 alert(e.point.name) // works
                                 <Summary component={e.point.name}/> // doesn't work in loading the summary page

                                     }
                                    }
                        }

只是开始进行前端开发，我不知道如何在单击条形图时将相应的组件传递给摘要页面来呈现摘要页面。谢谢我的帮助

t572786188 回答：从reactjs的highchart click事件中调用函数

您可以使用state来更改视图。完整的工作示例如下：

class SomeComponent extends React.Component {
  render() {
    return <div>{this.props.name}</div>;
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      renderChart: true,pointName: ""
    };
  }

  render() {
    return (
      <div>
        {this.state.renderChart ? (
          <HighchartsReact
            highcharts={Highcharts}
            options={{
              series: [
                {
                  data: [["one",1],["two",2],["three",3]],point: {
                    events: {
                      click: (function(component) {
                        return function() {
                          component.setState({
                            renderChart: false,pointName: this.name
                          });
                        };
                      })(this)
                    }
                  }
                }
              ]
            }}
          />
        ) : (
          <SomeComponent name={this.state.pointName} />
        )}
      </div>
    );
  }
}

实时演示： https://codesandbox.io/s/highcharts-react-demo-pjfvu

highchartsreactjs
本文链接：https://www.f2er.com/3165961.html

大家都在问