Reactjs 如何将react material ui snackbar与现有按钮一起使用？

我按照MaterialUI快餐店的说明，给出了一个简单的snackbar示例。但是，我不想用一个单独的按钮来显示snackbar消息，而是希望在单击现有按钮时显示消息

SnackBarTest.tsx-->参考

从“React”导入React；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Snackbar”导入Snackbar；
从“@material ui/core/IconButton”导入IconButton；
从“@material ui/icons/Close”导入CloseIcon；
导出默认函数SnackBarTest（）{
const[open，setOpen]=React.useState（false）；
常量handleClick=（）=>{
setOpen（真）；
};
const handleClose=（事件：React.SyntheticEvent | React.MouseEvent，原因？：字符串）=>{
如果（原因==‘单击离开’）{
返回；
}
setOpen（假）；
};
返回(
打开简单的snackbar
);
}

现在在sample.tsx文件中

import SnackBarTest from './SnackBarTest';

class Sample extends React.Component {
submitButton(){
  //doing some work
}


render(){
  return(
   <div>
     <Button onClick={this.submitButton}>Submit<Button/>
     <SnackBarTest />
   </div>

  )
}

从“./SnackBarTest”导入SnackBarTest；
类示例扩展了React.Component{
submitButton（）{
//做一些工作
}
render（）{
返回(
提交
)
}

---

在我的SAMPL.TSX中，它将显示我的小吃店的按钮和第二个按钮。我怎样才能把SnAccBARTestButton功能移到我现有的按钮？

把一个从父到SabKalButton组件的道具。或者把它从ReDux商店中保存起来，并把它看作是一个真实的来源。@ HasBybe你能分享一个简短的例子吗？n如何做到这一点？

import SnackBarTest from './SnackBarTest';

class Sample extends React.Component {
submitButton(){
  //doing some work
}


render(){
  return(
   <div>
     <Button onClick={this.submitButton}>Submit<Button/>
     <SnackBarTest />
   </div>

  )
}