Reactjs 如何在物料界面的导航栏中设置onClick？

下面是为应用程序创建导航栏/标题的代码。我用过材料界面

import React, { Component } from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import AccountCircle from "@material-ui/icons/AccountCircle";
import ShoppingCartOutlinedIcon from "@material-ui/icons/ShoppingCartOutlined";

const styles = (theme) => ({
  root: {
    width: "100%",
  },
  flex: {
    flex: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
});

class Nav extends Component {
  render() {
    const { classes } = this.props;

    return (
      <AppBar position="static" elevation={0}>
        <Toolbar>
          <IconButton
            className={classes.menuButton}
            color="contrast"
            onClick={this.props.toggleDrawer}
          >
            <MenuIcon />
          </IconButton>
          <Typography className={classes.flex} type="title" color="inherit">
            Pizza Shop
          </Typography>
          <div>
            <IconButton color="contrast" onClick={this.props.cart}>
              <ShoppingCartOutlinedIcon />
            </IconButton>
            <IconButton color="contrast" onClick={this.props.login}>
              <AccountCircle />
            </IconButton>
          </div>
        </Toolbar>
      </AppBar>
    );
  }
}

Nav.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Nav);

import React，{Component}来自“React”；
从“道具类型”导入道具类型；
从“@material ui/styles”导入{withStyles}”；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/IconButton”导入图标按钮；
从“@物料界面/图标/菜单”导入菜单图标；
从“@material ui/icons/AccountCircle”导入AccountCircle；
从“@material ui/icons/ShoppingCartOutlined”导入ShoppingCartOutlinedIcon；
常量样式=（主题）=>({
根目录：{
宽度：“100%”，
},
弹性：{
弹性：1，
},
菜单按钮：{
边缘左：-12，
marginRight:20，
},
});
类Nav扩展组件{
render（）{
const{classes}=this.props；
返回(
披萨店打工
);
}
}
导航类型={
类：PropTypes.object.isRequired，
};
导出默认样式（样式）（Nav）；

---

我是“道具”新手，我不确定

this.props.cart

或

this.props.login

可以做什么。我想创建一个功能，当我点击上面的两个图标时，我会被引导到另一个组件，但我不知道如何去做。请帮助我理解它。

Props

只是父组件发送给子组件的参数。在您的示例中，

this.props.cart

和

this.props.login

是函数（我不确定

cart

，但它被用作函数）。从您的示例中，当您单击图标时，您将调用从父级发送的

cart

和

login

函数

您的问题“如何设置onClick”的答案是您已经在

login

函数/方法上进行了设置。因此，您需要查看父组件实现

下面我写了一个更具可读性的示例，请随意查看

import React from 'react'

class ChildrenComponent extends React.Component {
  render() {
    // This is doing the same thing, just we call the function / method in little different way
    // return <div onClick={() => { this.props.onShoppingSubmit() }}>Aaa</div>
    return <div onClick={this.props.onShoppingSubmit}>Aaa</div>
  }
}

class ParentComponent extends React.Component {
  handleShoppingSubmit = () => {
    // Do what every that function needs to do
    console.log('Hi from parent')
  }

  render() {
    return (
      <div>
        <ChildrenComponent onShoppingSubmit={this.handleShoppingSubmit} />
      </div>
    )
  }
}

从“React”导入React
类ChildrenComponent扩展了React.Component{
render（）{
//这是做同样的事情，只是我们调用函数/方法的方式略有不同
//返回{this.props.onShoppingSubmit（）}>Aaa
返回Aaa
}
}
类ParentComponent扩展了React.Component{
handleShoppingSubmit=（）=>{
//做每个函数需要做的事情
console.log（'Hi from parent'）
}
render（）{
返回(
)
}
}

谢谢@Krystian。我可以在类Nav中定义cart（）和login（）吗？因为IconButton是在材质ui中预定义的类。。我自己无法定义IConButton中的任何函数当然，你可以。在哪里使用它取决于你自己。