如何从反应材料中的另一个组件打开抽屉？

Question

我想从react Material-UI中的另一个组件打开一个抽屉。所需的结果是，单击按钮（位于rete.js模块中）后，应打开抽屉（chatbotdrawer.js组件）。

相反，它显示另一个带有标签“在此处测试您的机器人”的按钮。我已经使用“打开”和“状态”道具进行了尝试，但是无法更改子组件的状态。有什么想法吗？

这是我的rete.js模块代码：

 const Rete = (props) => { 
   const [showDrawer, setShowDrawer] = useState(false);
    
  const saveButtonHandler1 = async () => {
    const showDrawerHandler = () => {
      setShowDrawer(!showDrawer);
    };
    
    showDrawerHandler()
    return (
      {showDrawer ? <ChatbotDrawer state={true} /> : null}
)}

这是我的chatbotdrawer.js代码：

  export default function SwipeableTemporaryDrawer(props) {
      const classes = useStyles();
      const [state, setState] = React.useState({
        right: false,
      });

  const toggleDrawer = (anchor, open) => (event) => {
    if (
      event &&
      event.type === "keydown" &&
      (event.key === "Tab" || event.key === "Shift")
    ) {
      return;
    }

    setState({ ...state, [anchor]: open });
  };

  const list = (anchor) => (
    <div
      className={clsx(classes.list, {
        [classes.fullList]:
          anchor === "test your bot here" || anchor === "right",
      })}
      role="presentation"
      onBlur={toggleDrawer(anchor, false)}
    >
      <Chatbot />
    </div>
  );

  return (
    <div>
      {["right"].map((anchor) => (
        <React.Fragment key={anchor}>
          <Button onClick={toggleDrawer(anchor, true)}>
            {"test your bot here"}
          </Button>
          <SwipeableDrawer
            anchor={anchor}
            open={state[anchor]}
            onClose={toggleDrawer(anchor, false)}
            onOpen={toggleDrawer(anchor, true)}
          >
            {list(anchor)}
          </SwipeableDrawer>
        </React.Fragment>
      ))}
    </div>
  );
}