reactjs - 无法对数据透视项目使用 onClick 操作不起作用

Question

我期望根据标志值呈现不同的组件，并且组件需要在 pivotitem 标记之外呈现。

class App extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            isflag: true
        };
    }

    render() {
        return (
            <div>           
                    <Pivot aria-label="Basic Pivot Example">
                        <PivotItem headerText={this.state.NumberofSupportRequests}  onClick={() => this.setState({ isflag: true })} >
                        </PivotItem>
                        <PivotItem headerText={this.state.MeanTimetoResolution} onClick={() => this.setState({ isflag: false })}>
                        </PivotItem>
                    </Pivot>                        

                    <div className="ms-Grid-row">
                        {this.state.isflag ? <component1 /> : <component2 />}
                    </div>

            </div>
        );
    }
}
export default App;

Answer 1

class App extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            isflag: true
        };
    }

    render() {
        return (
            <div>           
                    <Pivot aria-label="Pivot tabs for the charts"
                                selectedKey={this.state.isbarchart}
                                onLinkClick={() => { 
                                    if (this.state.isbarchart) {
                                        this.setState({ isbarchart: false });
                                    } else {
                                        this.setState({ isbarchart: true });
                                    }
                                }}
                                headersOnly={true}>
                        <PivotItem headerText={this.state.NumberofSupportRequests}  onClick={() => this.setState({ isflag: true })} >
                        </PivotItem>
                        <PivotItem headerText={this.state.MeanTimetoResolution} onClick={() => this.setState({ isflag: false })}>
                        </PivotItem>
                    </Pivot>                        

                    <div className="ms-Grid-row">
                        {this.state.isflag ? <component1 /> : <component2 />}
                    </div>

            </div>
        );
    }
}
export default App;