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

问题描述

我想从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>
  );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）