Javascript 物料-UI反应-另一提升机的提升机
我正在开发一个日历应用程序 问题是:单击一个popper的popper会同时关闭两个popper,因为它会触发关闭它的第一个popper的click out事件 我有一个组件Javascript 物料-UI反应-另一提升机的提升机,javascript,reactjs,material-ui,popper.js,react-popper,Javascript,Reactjs,Material Ui,Popper.js,React Popper,我正在开发一个日历应用程序 问题是:单击一个popper的popper会同时关闭两个popper,因为它会触发关闭它的第一个popper的click out事件 我有一个组件,它使用Material UI React,可以很好地使用它。将其与 单击+更多文本时,单元格顶部会出现包含当天所有事件的弹出框 popper子项也是: 单击一个事件会打开一个包含事件详细信息的弹出窗口,就像在单元格中单击它一样。 由于我使用了相同的组件,它可以做到这一点,但并不完全符合预期: 单击事件详细信息弹出程序关闭
,它使用Material UI React
,可以很好地使用它。将其与
单击+更多文本时,单元格顶部会出现包含当天所有事件的弹出框
popper子项也是
:
单击一个事件会打开一个包含事件详细信息的弹出窗口,就像在单元格中单击它一样。
由于我使用了相同的组件
,它可以做到这一点,但并不完全符合预期:
单击事件详细信息弹出程序关闭两个弹出程序
这就是问题所在:要求是点击弹出式按钮的外侧将关闭弹出式按钮,但点击内侧将使其保持打开和交互
调试显示,单击第二个popper将触发第一个popper的外部单击事件,该事件将关闭它。另外,从第一个popper中取出click-away监听器函数,让第二个popper在大多数单击中保持打开状态-单击其中的某些位置,将触发it's click-away函数并关闭它。e、 g:单击标题将关闭它,而单击位置或摘要divs则不会关闭它
我试着用
包装整个单元格
我试着用
尝试使用材质ui弹出状态npm,并给出了popper id属性。而不是单击“离开”时,将目标id与“popper”进行比较,如果相等,则保持打开状态。但是,从onClickAway事件的事件对象提取的id是空字符串。即使在点击弹跳器的时候
代码
-材质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>
)
}
const popper=({
安置
打开
主播,
handleClickAway=null,
标题
handleCloseClick=null,
儿童
popperStyle={},
calendarPopoverClass=“”
}) => {
const useStyles=makeStyles({
波普尔:波普尔风格
})
常量样式=使用样式();
返回(
{儿童}
)
}
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>
</>
);
}
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>
);
}
const MonthlyCell = ({
events,
isTimeShown,
popperPlacement,
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>
</>
);
}
const事件=({PROPS})=>{
const[expanded,setExpanded]=React.useState(null);
const closeExpanded=()=>setExpanded(null)
返回(
{timeToDisplay}
{title}
);
}
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>
</>
);
}
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>
);
}
const MonthlyCell = ({
events,
isTimeShown,
popperPlacement,
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>
</>
);
}
const Events=({Events,isTimeShown,localeToggle,popperPlacement,popperStyle,handleShowMoreClick=null})=>{
const eventsToShow:JSX.Element[]=[];
如果(events.length>0){
让eventsToShowAmount=3;
const moreventscont=events.length-eventstoshowmount;
eventsToShowAmount=moreEventsCount>0?eventsToShowAmount:events.length;
for(设i=0;i0){
eventsToShow.push()
}
}
返回(
{eventsToShow}
);
}
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>
</>
);
}
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>
);
}
const MonthlyCell = ({
events,
isTimeShown,
popperPlacement,
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>
</>
);
}
const MonthlyCell=({
事件,
伊斯提米镇,
波普尔置换术,
波普尔风格
}) => {
常量[expandedEvents,setExpandedEvents]=React.useState(null);
const cell=React.useRef(null)
const eventsList=(handleShowMoreClick=null)=>(
);
const handleShowMoreClick=()=>setExpandedEvents(eventsList());
const closeExpandedEvents=()=>{
setExpandedEvents(空);
}
返回(
{eventsList(handleShowMoreClick)}
{eventsList()}
);
}
希望这足够清楚。如果还需要什么,请告诉我。
多谢各位
编辑1
另一个尝试是给父popper提供更大的z索引,但没有成功解决方案是将popper子代放在一个div中。
我使用的组件导致了这种不需要的行为,因为它没有forwardRef支持。所以添加div包装器解决了这个问题
此外,删除“修改器”属性:
<Popper
// modifiers={{
// flip: {
// enabled: false,
// },
// preventOverflow: {
// enabled: false,
// boundariesElement: 'scrollParent',
// }
// }}
你的代码太大了,所以我没有通读所有内容,但我可以肯定地告诉你,这是z-index的问题。如果您只想用css解决问题,请将自定义css传递给每个弹出窗口,并从父弹出窗口中提供更高的z索引。@devd hi thx以获取注释。现在尝试了z索引,但不起作用:(可能是ClickAwayListener的问题