Javascript 如何在ReactJS中使用onClick处理事件

我对ReactJs相当陌生，试图在左边有一个静态侧边栏菜单，可以选择概览、性能和稳定性。然后我想在菜单的右侧有一个部分，显示从左侧菜单的3个选项中选择的结果。到目前为止，我已经有了下面的代码，并使用网格来分隔这两个部分。当用户单击其中一个菜单选项时，我尝试完成3件事。首先，当他们单击Overview（例如）时，右网格部分需要加载从Overview文件夹导入的js。第二，我还需要突出显示概览菜单选项，以便能够让用户知道他们选择了什么。第三，当页面打开时，默认情况下，我需要页面始终位于概览选择上。请让我知道我需要在下面的代码中添加什么才能完成这三件事。谢谢

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

从“/Overview”导入概述；
从“/Performance”导入性能；
从“/Stability”导入稳定性；
导出默认类菜单扩展了React.Component{
render（）{
返回(
菜单选择

概述

性能

稳定性
信息

);
}
}

我创建了一个示例代码，对您的代码所做的更改最少。但我必须提醒你，这不是（甚至不是）最好的处理方式

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

从“/Overview”导入概述；
从“/Performance”导入性能；
从“/Stability”导入稳定性；
导出默认类菜单扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
selectedView：“概述”
}
}
changeView=（视图）=>{
this.setState（{selectedView:view}）；
}
render（）{
返回(
菜单选择

这个.changeView（“overview”）}>overview

this.changeView（“performance”）}>performance

这个.changeView（“稳定性”）}>stability
信息

{this.state.selectedView==='overview'&&}
{this.state.selectedView==='performance'&&}
{this.state.selectedView==='stability'&&}
);
}
}

请尝试提出一个问题。这将使你的问题更有可能得到回答。@ElChiniNet我试图让问题更清楚一点。希望这样更好。非常感谢@aesen。但更好的处理方法是什么？为什么。。就像我说的，我对这方面还不太熟悉，希望尽早养成好习惯。顺便说一下，它不喜欢我们在这里传递变量的方式

{this.changeView（“overview”）}

。它基本上是失败的，但是

{this.changeView}

可以工作，尽管什么都没有passed@dontke抱歉，我正在调用函数而不是分配它。请你再检查一下，如果有效的话。突出显示我的选择或者更确切地说是当前选择的最佳方式是什么？假设我们在Overview上，我想确保Overview菜单以某种颜色突出显示。