MATERIAL-UI React-另一个Popper的Popper

问题描述

我正在使用日历应用程序。

问题：单击弹出器的弹出器会同时关闭两个弹出器，因为它会触发将其关闭的第一个弹出器的外部点击事件。

我有一个组件<Event />，它使用Material-UI React <Popper />，并且可以正常工作。将其与<AwayClickListener />结合使用时，在单击侧面时将关闭，而在弹出器内部单击时将保持打开。我创建了<Events />，它是<Event />的列表。

点击+更多文本时，在单元格顶部应显示带有当天所有事件的弹出窗口。

波普尔的孩子也是<Events />：

单击事件应打开带有事件详细信息的弹出窗口，就像在单元格中单击该窗口一样。由于我使用的是相同的组件<Events />，所以它可以做到，但不能完全按预期进行：

单击事件详细信息弹出窗口将同时关闭两个弹出窗口。

这是问题所在：要求是，单击弹出器的侧面将关闭弹出器，但是单击内部将使它们保持打开状态并保持互动状态

调试表明，单击第二个Popper会触发第一个Popper的外部单击事件，从而将其关闭。同样，从第一个弹出器中删除“单击离开”侦听器功能，使第二个弹出器对大多数单击保持打开状态-单击其中的某些位置，触发将其关闭的“点击离开”功能。例如：单击标题将其关闭，而单击位置或摘要div则不会。

我尝试用<ClickAwayListener />包装整个单元格。
我尝试用<ClickAwayListener />包裹波普尔的孩子
尝试使用material-ui-popup-state npm，并赋予popper id属性。比点击时将目标ID与“ popper”进行比较，如果相等则保持打开状态。但是，从onClickAway事件的事件对象中提取的ID为空字符串。即使点击弹出窗口也是如此。

代码

<Popper>-材质ui popper的服装包装器

const popper = ({
  placement,open,anchorEl,handleClickAway=null,title,handleCloseClick=null,children,popperStyle = {},calendarPopoverClass = ''
}) => {
  const useStyles = makeStyles({
    Popper: popperStyle
  })
  const styles = useStyles();
  return (
    <Popper modifiers={{
      flip: {
        enabled: false,},preventOverflow: {
        enabled: false,boundariesElement: 'scrollParent',}
    }}
      className={styles.Popper}
      placement={placement}
      open={open}
      anchorEl={anchorEl}
    >
      <ClickAwayListener onClickAway={handleClickAway}>
        <CalendarPopover className={st(classes[calendarPopoverClass])} isShown withArrow={false} title={title} onClose={handleCloseClick}>
          {children}
        </CalendarPopover>
      </ClickAwayListener>
    </Popper>
  )
}

<Event />

const event = ({ PROPS }) => {
const [expanded,setExpanded] = React.useState(null);
const closeExpanded = () => setExpanded(null)
return (
        <>
          <div
            className={st(classes.Event,{ isTimeShown,isNextWeekFirstFiller,isLastFiller,isMultiDay,isAllDay,isFiller })}
            style={inlinestyle}
            onClick={onEventClick}
          >
            <div className={classes.Time}>{timetodisplay}</div>
            <div className={classes.Title}>{title}</div>
          </div>
          <Popper
      placement={popperPlacement}
      title={title}
      handleCloseClick={closeExpanded}
      handleClickAway={closeExpanded}
      open={Boolean(expanded)}
      anchorEl={expanded}
      popperStyle={popperStyle}
      calendarPopoverClass='Event'
    >
      <ExpandedEvent
        startDate={startDate}
        endDate={endDate}
        location={location}
        summary={summary}
      />
    </Popper>
        </>
      );
}

<Events />

const Events = ({ events,isTimeShown,localetoggle,popperPlacement,popperStyle,handleShowMoreClick=null }) => {
  const eventsToShow: JSX.Element[] = [];
  if (events.length > 0) {
    let eventsToShowAmount = 3;
    const moreEventsCount = events.length - eventsToShowAmount;
    eventsToShowAmount = moreEventsCount > 0 ? eventsToShowAmount : events.length;
    for (let i = 0; i < eventsToShowAmount; i++) {
      eventsToShow.push(
        <Event
          key={events[i].id}
          {...events[i]}
          isTimeShown={isTimeShown}
          popperPlacement={popperPlacement}
          popperStyle={popperStyle}
        />
      )
    }
    if (moreEventsCount > 0) {
      eventsToShow.push(<ShowMore key='ShowMore' handleClick={handleShowMoreClick} moreEventsCount={moreEventsCount} />)
    }
  }

  return (
    <div className={classes.Events}>
      {eventsToShow}
    </div>
  );
}

<MonthlyCell />

const MonthlyCell = ({
  events,popperStyle
}) => {

  const [expandedEvents,setExpandedEvents] = React.useState(null);
  const cell = React.useRef<HTMLdivelement>(null)


  const eventsList = (handleShowMoreClick = null) => (
    <Events
      events={events}
      isTimeShown={isTimeShown}
      localetoggle={true}
      popperPlacement={popperPlacement}
      popperStyle={popperStyle}
      handleShowMoreClick={handleShowMoreClick}
    />
  );

  const handleShowMoreClick = () => setExpandedEvents(eventsList());

  const closeExpandedEvents = () => {
    setExpandedEvents(null);
  }

  return (
    <>
      <div ref={cell} className={classes.MonthlyCell} >
        {eventsList(handleShowMoreClick)}
      </div>
      <Popper
        placement='left'
        open={Boolean(expandedEvents)}
        title='hello'
        handleClickAway={closeExpandedEvents}
        anchorEl={cell.current}
        popperStyle={{ left: '17% !important' }}
        handleCloseClick={closeExpandedEvents}
      >
        {eventsList()}
      </Popper>
    </>
  );
}

希望这很清楚。让我知道是否还有其他需要。谢谢

编辑1

另一种尝试是给父popper更大的z-index，但是没有用

解决方法

解决方案是围绕div中的popper孩子。由于某种原因，我使用的组件导致了这种不必要的行为。

还要删除修饰符属性：

<Popper 
      // modifiers={{
      // flip: {
      //  enabled: false,// },// preventOverflow: {
      //   enabled: false,//   boundariesElement: 'scrollParent',//  }
    // }}

有效解决方案的链接：https://codesandbox.io/s/popper-in-a-popper-s6dfr?file=/src/Popper/Popper.js:372-519

javascript material-ui popper.js react-popper reactjs reactjs