Question

我正在尝试做输入字段，它在聚焦时打开菜单。菜单打开得很好，但当菜单可见时，输入字段失去焦点和所有自定义样式。任何想法如何在菜单可见的同时保持专注于输入？

这是我的处理程序：

const [anchorElSearch, setAnchorElSearch] = React.useState(null);

const handleClickSearch = (event) => {
  setAnchorElSearch(event.currentTarget);
};

这是我的输入字段和菜单组件：

<Input
  className={classes.searchInput}
  classes={{ focused: classes.searchInputFocused }}
  aria-controls="searchMenu"
  aria-haspopup="true"
  onClick={handleClickSearch}
/>
<Menu
  id="searchMenu"
  anchorEl={anchorElSearch}
  keepMounted
  open={Boolean(anchorElSearch)}
>
  <MenuItem onClick={handleCloseSearch}>Works</MenuItem>
</Menu>

Answer 1

我会放弃 Menu 组件并实现如下内容：

const { ClickAwayListener, Input, MenuList, MenuItem, makeStyles } = MaterialUI

const useStyles = makeStyles({
  searchInputFocused: {
    border: "1px solid hotpink"
  }
});

function App() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);

  const handleClickSearch = () => {
    setOpen((prev) => !prev);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <ClickAwayListener onClickAway={handleClose}>
      <div>
        <Input
          classes={{ focused: classes.searchInputFocused }}
          onClick={handleClickSearch}
        />
        {open ? (
          <MenuList
            onClick={handleClose}
            style={{ background: "#eeeeee" }}
          >
            <MenuItem>Item 1</MenuItem>
            <MenuItem>Item 2</MenuItem>
            <MenuItem>Item 3</MenuItem>
          </MenuList>
        ) : null}
      </div>
    </ClickAwayListener>
  );
}

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<div id="root"></div>

打开菜单时材质 UI 输入失去焦点

1 个答案: