如何解决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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。