Как обрабатывать события с помощью onClick в ReactJS

Question

Я довольно новичок в ReactJ и пытаюсь использовать статическое боковое меню слева с обзором, производительностью и стабильностью в качестве выбора. Затем я хочу иметь раздел справа от меню, который отображает результаты выбора из 3 вариантов в левом меню. У меня есть код ниже, и я использую сетку для разделения двух разделов. Я пытаюсь выполнить 3 вещи, когда пользователь нажимает одну из опций меню. Во-первых, когда они нажимают на Обзор, например, тогда в правой части сетки должна быть загружена js, импортированная из папки обзора. Во-вторых, мне нужно также выделить пункт меню Обзор, чтобы пользователь мог узнать, что он выбрал. 3-е, мне нужно, чтобы страница открывалась при выборе обзора по умолчанию при открытии страницы. Пожалуйста, дайте мне знать, что мне нужно добавить в код ниже, чтобы выполнить 3 вещи. Спасибо.

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

Я создал пример кода с минимальным изменением, которое я могу сделать в вашем коде. Но я должен напомнить вам, что это не самый лучший способ справиться с этим.

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