在反应中弹出显示结果答案

【问题标题】：Displaying result in pop-up in react在反应中弹出显示结果
【发布时间】：2021-12-31 11:50:56
【问题描述】：

我下面有table，它工作正常。

现在客户端已请求，如果用户点击icon（以蓝色突出显示），则选定的row 应垂直显示在popup 中。任何想法如何做到这一点。我是react的初学者。

【问题讨论】：

标签： javascript reactjs user-interface html-table react-hooks

【解决方案1】：

我已经完成了弹出窗口的简单实现。我不明白垂直弹出窗口，所以我实现了一般弹出窗口。

链接：https://jsfiddle.net/himanshu1024/hyvqkfwu/2/

问题是，只有在选择/保存一行时才会显示弹出窗口，如果 selectedRow 为 NULL，则 NULL && <div id="popup"></div> 将是 false，所以没有弹出窗口将显示出来。

您还可以在此处查看其他类似代码：https://www.c-sharpcorner.com/article/how-to-create-a-modal-pop-up-in-reactjs-appliaction/

这里有视频讲解：https://www.youtube.com/watch?v=i8fAO_zyFAM

【讨论】：

【解决方案2】：

请参考下面使用材质 ui popover 组件的示例

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(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

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

  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 }}>The content of the Popover.</Typography>
      </Popover>
    </div>
  );
}

您可以参考此链接material ui 并按照自己的方式进行自定义

【讨论】：