Question

我正在使用material-ui和reactJS。我有多个产品卡组件。当我将鼠标悬停在产品卡上时，我想显示一个Popover，以获取该产品的详细信息。但是由于Popover占用了两个卡片组件的空间，所以每当我将鼠标移到Popover上时，它就会关闭，并且下面的产品Card的Popover会打开。我想防止这种行为，因为我的Popover也包含可点击的链接。这是我的代码-

产品卡-

class ProductCard extends React.Component {
  state = {
    anchorEl: null,
  };

  handlePopoverOpen = event => {
    this.setState({ anchorEl: event.target });
  };

  handlePopoverClose = () => {
    this.setState({ anchorEl: null });
  };

  render() {
    const { classes } = this.props;

    const { anchorEl } = this.state;

    const open = Boolean(anchorEl);

    return (
      <Fragment>
        <Card className={classes.card} elevation={0} onMouseEnter={this.handlePopoverOpen} onMouseLeave={this.handlePopoverClose}>
          <CardMedia
          className={classes.media}
          image="image_link"
          title="xyz"
          />
        <CardContent className={classes.content}>
          <Typography variant="caption" gutterBottom align="left">
            Diamond Ring
          </Typography>
          <Typography component="p" align="left">
            <span className={classes.boldText}>&#8377; 10898</span>
            <span className={classNames(classes.strike : true, classes.lightText : true)}>14000</span>
            <span className={classes.lightText}>(23%)</span>
          </Typography>
        </CardContent>
        </Card>

        <Popover
          className={classes.popover}
          classes={{
            paper: classes.paper,
          }}
          elevation={4}
          marginThreshold={40}
          open={open}
          anchorEl={anchorEl}
          anchorOrigin={{
            vertical: 'top',
            horizontal: 'left',
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'left',
          }}
          onClose={this.handlePopoverClose}
        >
        <ProductPopover/>
        </Popover>
      </Fragment>
    );
  }
}

父容器中有多个此类卡。

谢谢。

Answer 1

我认为最好在点击卡片后打开弹出窗口，这样它将保持打开状态，以便您可以单击弹出窗口上的链接。

<OverlayTrigger trigger="click" placement="left" overlay={
<Popover className="popover-trigger-click-root-close" id={"popover-trigger-click-root-close"}>
   // You data
</Popover>
}>
<div>
   <Card className={classes.card} elevation={0} onMouseEnter={this.handlePopoverOpen} onMouseLeave={this.handlePopoverClose}>
      <CardMedia
         className={classes.media}
         image="image_link"
         title="xyz"
         />
      <CardContent className={classes.content}>
         <Typography variant="caption" gutterBottom align="left">
            Diamond Ring
         </Typography>
         <Typography component="p" align="left">
            <span className={classes.boldText}>&#8377; 10898</span>
            <span className={classNames(classes.strike : true, classes.lightText : true)}>14000</span>
            <span className={classes.lightText}>(23%)</span>
         </Typography>
      </CardContent>
   </Card>
</div>
</OverlayTrigger>

如何为多个Card组件创建Popover？

1 个答案: