如何使用 ReactJS 中的 onClick 处理事件

Question

I am fairly new to ReactJs and trying to have a static sidebar menu on the left with Overview, Performance and Stability as the choices. Then I want to have a section to the right of the menu that displays the results from the selection of the 3 choices on the left menu. I have the below code so far and using grid to separate the two sections. I am trying to accomplish 3 things when a user clicks one of the menu options. 1st when they click on Overview for example then the right grid section needs to load the js that is imported from overview folder. 2nd I need to also highlight the Overview menu selection in order to be able to let the user know what they have selected. 3rd I need for the page to always land on Overview selection by default when the page is opened. Please let me know what I need to add to the code below in order to accomplish the 3 things. Thanks.

import Overview from "./overview";
import Performance from "./performance";
import Stability from "./stability";

export default class Menu extends React.Component {
  render() {
    return (
            <Grid>
              <GridItem columnSpan = {3}>
                 <h3> Menu selection </h3> <br/>
                 <h1> Overview </h1> <br/>
                 <h1> Performance </h1> <br/>
                 <h1> Stability </h1>
              </GridItem>
              <GridItem columnSpan = {9}>
                 <h3> Info </h3> <br/>
              </GridItem>
            </Grid>
        );
    }
}

Answer 1

I created a sample code with the minimum change i can do to your code. But i must remind you that this is not (not even near) the best way to handle it.

import Overview from "./overview";
import Performance from "./performance";
import Stability from "./stability";

export default class Menu extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            selectedView: "overview"
        }
    }

    changeView = (view) => {
        this.setState({selectedView: view});
    }

  render() {
    return (
            <Grid>
              <GridItem columnSpan = {3}>
                 <h3>Menu selection</h3> <br/>
                 <h1 onClick={() => this.changeView("overview")}> Overview </h1> <br/>
                 <h1 onClick={() => this.changeView("performance")}> Performance </h1> <br/>
                 <h1 onClick={() => this.changeView("stability")}> Stability </h1>
              </GridItem>
              <GridItem columnSpan = {9}>
                 <h3>Info</h3> <br/>
                 {this.state.selectedView === 'overview' && <Overview />}
                 {this.state.selectedView === 'performance' && <Performance />}
                 {this.state.selectedView === 'stability' && <Stability />}
              </GridItem>
            </Grid>
        );
    }
}