Material ui 如何在搜索时打开边栏

Question

我有一个侧边栏，当您在我的导航栏中单击右键时它可以正常工作，而不是单击按钮我想在用户开始输入搜索输入时打开它，因为我提供给我的组件 searchInput 作为道具。使用此 if 语句

if (!!searchInput) {
   toggleDrawer("right", true);
}

在我的代码中，它应该在用户开始输入时将其切换为打开边栏，但当我开始输入时没有任何反应。

import { Fragment, useEffect, useState } from "react";
import Box from "@mui/material/Box";
import Drawer from "@mui/material/Drawer";
import Button from "@mui/material/Button";
import List from "@mui/material/List";
import Divider from "@mui/material/Divider";
import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import InboxIcon from "@mui/icons-material/MoveToInbox";
import MailIcon from "@mui/icons-material/Mail";
import { collection, getDocs } from "@firebase/firestore";
import db from "../../firebase";

export default function SearchDrawer({ searchInput }) {
  const [messages, setMessages] = useState([]);
  const [state, setState] = useState({
    right: false,
  });

  useEffect(() => {
    const getMessages = async () => {
      const channels = await getDocs(collection(db, "channels"));
      channels.forEach(async (channel) => {
        const msgs = await getDocs(
          collection(db, "channels", channel.id, "messages")
        );
        msgs.forEach((msg) => {
          setMessages((prev) => [...prev, msg.data()]);
        });
      });
    };
    return () => setMessages([]) && getMessages();
  }, []);
  // console.log(messages);

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

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

  if (!!searchInput) {
    toggleDrawer("right", true);
  }

  const list = (anchor) => (
    <Box
      sx={{ width: anchor === "top" || anchor === "bottom" ? "auto" : "45vw" }}
      role="presentation"
      onClick={toggleDrawer(anchor, false)}
      onKeyDown={toggleDrawer(anchor, false)}
    >
      <List>
        {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
          <ListItem button key={text}>
            <ListItemIcon>
              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
            </ListItemIcon>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
      <Divider />
      <List>
        {["All mail", "Trash", "Spam"].map((text, index) => (
          <ListItem button key={text}>
            <ListItemIcon>
              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
            </ListItemIcon>
            <ListItemText primary={text} />
          </ListItem>
        ))}
      </List>
    </Box>
  );

  return (
    <>
      <Fragment key={"right"}>
        <Button onClick={toggleDrawer("right", true)}>{"right"}</Button>
        <Drawer
          anchor={"right"}
          open={state["right"]}
          onClose={toggleDrawer("right", false)}
        >
          {list("right")}
        </Drawer>
      </Fragment>
    </>
  );
}

Answer 1

您正在从

返回一个函数

if (!!searchInput) {
   toggleDrawer("right", true);
}

您可以将其更改为

if(searchInput && !state.right){
  setState({right:true})
}

Material ui 如何在搜索时打开边栏

Material ui how to toggle open sidebar on search

javascript

drawer

reactjs

material-ui

use-effect