Javascript 反应/MUI Popover定位不正确,固定位置不正确
我正在列表元素中使用React/MUI Popover,但无法使Popover正确定位——它始终位于窗口的左上角(该组件无法对锚元素[Javascript 反应/MUI Popover定位不正确,固定位置不正确,javascript,reactjs,material-ui,react-window,Javascript,Reactjs,Material Ui,React Window,我正在列表元素中使用React/MUI Popover,但无法使Popover正确定位——它始终位于窗口的左上角(该组件无法对锚元素[anchorEl在文档中])执行getBoundingClientRctd() 所以为了暂时解决这个问题,我决定使用anchorPosition参数来设置一个绝对位置——在我的例子中,就在窗口的中间。那也不行 我已经查看了Chrome开发工具中的值,一切似乎都正常(即,我使用该工具时确实得到了一个锚定;我得到了有效的位置左/顶值;等等 可能是一些非常简单的事情,希
anchorEl
在文档中])执行getBoundingClientRctd()
所以为了暂时解决这个问题,我决定使用anchorPosition
参数来设置一个绝对位置——在我的例子中,就在窗口的中间。那也不行
我已经查看了Chrome开发工具中的值,一切似乎都正常(即,我使用该工具时确实得到了一个锚定;我得到了有效的位置左/顶值;等等
可能是一些非常简单的事情,希望有人能指出我做错了什么
编辑:解决方案的关键要素
行
组件必须在包含组件的外部定义
组件有一个itemData
属性,用于将自定义数据传递到行
renderScheduleColumn(columnData){
const{classes}=this.props;
const{scheduleDate,schedulemplates}=columnData;
this.schedulemplates=schedulemplates;
常量行=({index,style})=>{
返回(
{this.renderScheduleComponent(scheduleTemplates[index],`${scheduleDate}:${index}`)}
);
}
const{columnHeight,columnWidth}=this.state;
返回(
{scheduleDate}
{Row}
);
}
看起来问题与此处类似:
您应该将行
函数的定义移出renderScheduleColumn
,使其成为一致的类型。这也需要移动/重新处理renderScheduleComponent
。您可以使用列表上的itemData属性将信息传递到行。Awesome--这完全正确。谢谢发布一个答案,这样我就可以给你信用了!
renderPopover(template, itemId) {
const { anchorEl, anchorId } = this.state;
const { classes } = this.props;
const open = Boolean(anchorEl) && anchorId === itemId;
const bgColor = '#babaef';
const { innerHeight, innerWidth } = window;
const positionLeft = innerWidth / 2;
const positionTop = innerHeight / 2;
console.log(`renderPopover: ${positionLeft} / ${positionTop}`);
<Popover
id="simple-popper"
open={open}
style={{ color: 'Black' }}
anchorEl={anchorEl}
onClose={event => this.handlePopoverClose(event)}
anchorPosition={{ left: {positionLeft}, top: {positionTop} }}
anchorReference="anchorPosition"
>
<Typography style={{ backgroundColor: bgColor }} className={classes.typography}>
{this.renderScheduleElements(template, itemId)}
</Typography>
</Popover>
);
}
renderScheduleComponent(template, itemId) {
const { anchorEl, anchorId } = this.state;
const open = Boolean(anchorEl) && anchorId === itemId;
const { classes } = this.props;
const id = open ? 'simple-popper' : undefined;
return (
<Grid key={itemId} item>
<Paper className={classes.paper}>
<div style={{ padding: '4px' }}>
<Button
NO_ref={itemId}
NODE_ref={(node) => this.buttonRef = node}
id={itemId}
name={itemId}
aria-owns={id}
aria-haspopup="true"
variant="outlined"
color="primary"
style={{
fontWeight: 'bold',
padding: '8px',
margin: 'auto',
display: 'block',
width: '100%',
}}
onClick={event => this.handlePopoverClick(event, itemId)}
>
{template.templateName}
</Button>
{(this.renderPopover).call(this, template, itemId)}
</div>
</Paper>
</Grid>
);
}
handlePopoverClick(event, id) {
event.preventDefault();
console.log(`handlePopoverClick : ${event.currentTarget.name}`);
this.setState({
anchorEl: event.currentTarget,
anchorId: id,
});
}
renderScheduleColumn(columnData) {
const { classes } = this.props;
const { scheduleDate, scheduleTemplates } = columnData;
this.scheduleTemplates = scheduleTemplates;
const Row = ({ index, style }) => {
return (
<div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
{this.renderScheduleComponent(scheduleTemplates[index], `${scheduleDate}:${index}`)}
</div>
);
}
const { columnHeight, columnWidth } = this.state;
return (
<Grid id={scheduleDate} key={scheduleDate} item>
<Paper className={classes.paper}>
<div style={{ width: '100%', textAlign: 'center' }}>
<Typography variant="h6" style={{ padding: '24px', color: 'white', backgroundColor: '#3f51b5' }}>
{scheduleDate}
</Typography>
</div>
<List
className="List"
height={columnHeight}
itemCount={scheduleTemplates.length}
itemSize={50}
width={columnWidth}
>
{Row}
</List>
</Paper>
</Grid>
);
}