Próbuję utworzyć niestandardowy haczyk, który zwraca niestandardową szufladę i przycisk (w celu przełączenia stanu szuflady). Zarządzam stanem na samym haczyku.

To jest mój niestandardowy haczyk do zwrotu szuflady i przycisku

import React from "react";
import clsx from "clsx";
import { makeStyles } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import List from "@material-ui/core/List";
import Divider from "@material-ui/core/Divider";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import MailIcon from "@material-ui/icons/Mail";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBars } from "@fortawesome/free-solid-svg-icons";
import { Button } from "@material-ui/core";

const useStyles = makeStyles({
  list: {
    width: 250
  },
  fullList: {
    width: "auto"
  }
});

export default function useTemporaryDrawer(toggle) {
  const classes = useStyles();

  const [state, setState] = React.useState({
    right: false
  });

  const toggleDrawer = (anchor, open) => (event) => {
    if (
      event.type === "keydown" &&
      (event.key === "Tab" || event.key === "Shift")
    ) {
      return;
    }
    alert("setting");
    setState({ ...state, [anchor]: open });
  };

  const onButtonClick = (e) => {
    toggleDrawer("right", true)(e);
  };

  const Toggler = (
    <Button
      style={{
        marginTop: "10px"
      }}
      onClick={onButtonClick}
      startIcon={<FontAwesomeIcon icon={faBars} style={{ color: "#fff" }} />}
    ></Button>
  );

  const list = (anchor) => (
    <div
      className={clsx(classes.list, {
        [classes.fullList]: anchor === "top" || anchor === "bottom"
      })}
      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>
    </div>
  );

  const CustomDrawer = (
    <Drawer
      anchor={"right"}
      open={state["right"]}
      onClose={toggleDrawer("right", false)}
    >
      {list("right")}
    </Drawer>
  );

  return {
    CustomDrawer,
    setState,
    state,
    Toggler
  };
}

Następnie próbuję zaktualizować stan za pomocą przycisku przełączania, którego używam w nagłówku. To jest mój nagłówek

import React from "react";
import styles from "./Header.module.css";
import useTemporaryDrawer from "../Drawer/useTemporaryDrawer";

const Header = (props) => {
  const { Toggler } = useTemporaryDrawer();

  return <div className={styles.headerForApp}>{Toggler}</div>;
};

export default Header;

Po naciśnięciu przycisku Przełącz, aktualizuje stan, ale nie aktualizuje otwartej właściwości szuflady. Krótko mówiąc, nie jestem w stanie otworzyć szuflady przez przycisk przełączania. Proszę pomóż.

Oto piaskownica https://codesandbox.io/s/customhooksnotupdatingStateStateStateStateStateState -d7mfz? Plik = / src / komponenty / szuflada / usetemporarydrawer.js

2
code_abhi 14 marzec 2021, 02:20

1 odpowiedź

Najlepsza odpowiedź

Jeśli mam 2 elementy: A i B, a każdy z nich ma setState, aby zaktualizować zmienną state, nie spodziewasz się setState('a') w dowolnej zmianie na {{x3 }} W b, czy jesteś? Ale wtedy tworzysz 2 elementy, każdy z nich z ich niezależnym państwem i oczekuje, że te państwa będą jakoś dzielone. Przełączanie nagłówka zmienia stan nagłówka, a szuflada w desce rozdzielczej nie miało widoczności tych zmian. Jako opcja możesz przełączać do nagłówka jako rekwizyty

<Header Toggler={Toggler} />
const Header = (props) => {
return <div className={styles.headerForApp}>{props.Toggler}</div>;
};
0
Nadia Chibrikova 14 marzec 2021, 09:01