Question

我编写了一个简单的钩子，以在单击按钮时显示弹出菜单。我在传递buttonRef时遇到问题，似乎正在将其传递给组件，但是元素的位置不正确，就好像它根本没有通过。

我在codeSanbox上包含了一个示例：https://codesandbox.io/s/9o03qx3n3o

我已经确认，当不在钩子中时，这种方法是可行的，React开发工具显示它在两个实例中都传递相同的元素。我试过使用forwardRef，同样的问题，我试过使用标准状态将ref存储为无效；

--- Hook ---

const usePopperMenu = btnRef => {
  const [open, setOpen] = useState(false);

  const handleClose = event => {
    if (btnRef.current.contains(event.target)) {
      return;
    }
    setOpen(false);
  };
  const elems = ({ children }) => (
    <Popper
      open={open}
      anchorEl={btnRef.current}
      placement="bottom"
      transition
      disablePortal
    >
      {({ TransitionProps, placement }) => (
        <Grow
          {...TransitionProps}
          id="menu-list-grow"
          style={{
            transformOrigin:
              placement === "bottom" ? "center top" : "center bottom"
          }}
        >
          <Paper>
            <ClickAwayListener onClickAway={e => handleClose(e)}>
              <MenuList>{children}</MenuList>
            </ClickAwayListener>
          </Paper>
        </Grow>
      )}
    </Popper>
  );
  return [elems, setOpen, open];
};

--- App/Component ---

function App() {
  const btnRef = useRef(null);
  const [Menu, setOpen, open] = usePopperMenu(btnRef);
  return (
    <div className="App">
      <div>
        <Button
          buttonRef={btnRef}
          onClick={() => setOpen(!open)}
          variant="outlined"
          color="secondary"
        >
          Click Me!
        </Button>
        <Menu>
          <MenuItem>
            <Typography color="textPrimary">Menu Item 1</Typography>
          </MenuItem>
          <MenuItem>
            <Typography color="textPrimary">Menu Item 2</Typography>
          </MenuItem>
        </Menu>
      </div>
    </div>
  );
}

Answer 1

它对我很有用-问题在于您的CSS样式。按钮容器已满，display:grid就是下拉菜单放错位置的原因

尝试：

.App {
  display: flex;
  justify-content: center;
}

https://codesandbox.io/s/oprzyv665?fontsize=14

Answer 2

代码中的问题是，您运行钩子并将ref传递给它，该钩子最初并未分配给button元素。它只会在初始渲染后分配，并且发布后您无需重新渲染应用程序即可重新初始化钩子，以便获得正确的引用。另外，您正在尝试在不需要它们的地方安装自定义钩子。您想要实现的目标只需使用组件模型即可完成。

您的Popper代码如下

import React, { useState } from "react";
import Grow from "@material-ui/core/Grow";
import Paper from "@material-ui/core/Paper";
import Popper from "@material-ui/core/Popper";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
import MenuList from "@material-ui/core/MenuList";

const PopperMenu = ({ target, children, open, handleClose }) => (
  <Popper
    open={open}
    anchorEl={target.current}
    placement="bottom"
    transition
    disablePortal
  >
    {({ TransitionProps, placement }) => (
      <Grow
        {...TransitionProps}
        id="menu-list-grow"
        style={{
          transformOrigin:
            placement === "bottom" ? "center top" : "center bottom"
        }}
      >
        <Paper>
          <ClickAwayListener onClickAway={e => handleClose(e)}>
            <MenuList>{children}</MenuList>
          </ClickAwayListener>
        </Paper>
      </Grow>
    )}
  </Popper>
);

export default PopperMenu;

您可以像这样使用

import React, { useRef, useState } from "react";
import ReactDOM from "react-dom";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
import MenuItem from "@material-ui/core/MenuItem";
import PopperMenu from "./hooks";
import "./styles.css";

function App() {
  const btnRef = useRef(null);
  const [open, setOpen] = useState(false);
  const handleClose = event => {
    if (btnRef.current.contains(event.target)) {
      return;
    }
    setOpen(false);
  };
  return (
    <div className="App">
      <div>
        <Button
          buttonRef={btnRef}
          onClick={() => setOpen(!open)}
          variant="outlined"
          color="secondary"
        >
          Click Me!
        </Button>
        <PopperMenu target={btnRef} handleClose={handleClose} open={open}>
          <MenuItem>
            <Typography color="textPrimary">Menu Item 1</Typography>
          </MenuItem>
          <MenuItem>
            <Typography color="textPrimary">Menu Item 2</Typography>
          </MenuItem>
        </PopperMenu>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Working demo

传递ref到钩子问题

2 个答案: