时间戳

首页 > 解决方案 > 如何使用 MaterialUI Button 调用功能组件中按钮的组件 onClick

reactjs - 如何使用 MaterialUI Button 调用功能组件中按钮的组件 onClick

问题描述

我正在为按钮使用 Material UI，并希望在按钮的单击上呈现不同的功能组件。我也在一个功能组件中做这一切。（是我要触发的组件）

const driveAction=props =>{
    return <SharedDriveAction/>;
}


const Vehicle = ({vehicle}) => {
const classes = useStyles();

return (
<Button
    onClick= {() => { driveAction }}
    size="small"
    color="secondary"
    className={classes.button}
    >
  Drive
 </Button>
);
}

export default Vehicle;

标签： reactjsmaterial-ui

解决方案

更简单地说，让你的总体组件有一个状态变量 open 用于条件渲染。OnClick，挂钩 this.setState（用于类组件）以切换打开变量。在下面的示例中，可以很容易地处理内联条件渲染。

{  props.open ? <Component/> : null }

推荐阅读