material-ui 使用'useState'在Popover内部处理字符串时无法正常工作,

mzsu5hc0 于 6个月前发布在其他

关注(0)|答案(5)|浏览(54)

重复问题

我搜索了现有的问题

重现步骤 🕹

步骤：

不要使用硬编码的文本，而是使用'useState'代替Popover中的子值。
例如：{text}。 // 这将导致问题

<Popover
       id={id}
       open={open}
       anchorEl={anchorEl}
       onClose={handleClose}
       anchorOrigin={{
         vertical: 'bottom',
         horizontal: 'left',
       }}
     >
       <Typography sx={{ p: 2 }}>{text}</Typography>
     </Popover>

例如：硬编码文本不会导致问题。

<Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
      >
        <Typography sx={{ p: 2 }}>HARD CODE TEXT</Typography>
      </Popover>

当前行为 😯

链接到实时示例：
https://codesandbox.io/s/nfxd61?file=/demo.tsx
问题：
当使用'useState'切换Popover内的文本时，请注意Popover关闭了，但您会看到带有空文本的div在完全关闭之前消失。然而，硬编码文本工作得很好。
屏幕录制：2023-03-27.at.10.55.06.AM.mov
代码：

import * as React from 'react';
import Popover from '@mui/material/Popover';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';

export default function BasicPopover() {
  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);

  const [text, setText] = React.useState('');

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setText('hello');
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
    setText('');
  };

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popover' : undefined;

  return (
    <div>
      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
        Open Popover
      </Button>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
      >
        <Typography sx={{ p: 2 }}>{text}</Typography>
      </Popover>
    </div>
  );
}