我正在为使用Redux框架的Material UI提供的每个实用程序创建单独的组件。
我在创建Popover组件时卡住了。
问题是当我调用Popover Container时，它会从屏幕的左上角飞过来。然而，当使用plain react框架创建相同的弹出窗口时。一切正常。
代码片段:Popover.js
class PopoverTip extends Component {
constructor(props) {
super(props);
}
handleRequestClose = () => {
this.props.togglePopover();
};
render() {
const { isOpen, anchorEl } = this.props;
return (
< div>
{isOpen && < Popover
open={isOpen}
anchorEl={anchorEl}
anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
targetOrigin={{horizontal: 'left', vertical: 'top'}}
animation={PopoverAnimationVertical}
onRequestClose={this.handleRequestClose}>
< Menu>
< MenuItem primaryText="Refresh" />
< MenuItem primaryText="Help & feedback" />
< MenuItem primaryText="Settings" />
< MenuItem primaryText="Sign out" />
</ Menu>
</ Popover>}
</ div>
);
}
}
export default PopoverTip;
ExampleComponent.js -从这里我调用popover元素并显示弹出窗口
showPopover(event) {
event.preventDefault();
this.props.togglePopover(event.currentTarget);
};
<IconButton onClick={ this.showPopover.bind(this) }>
<HelpIco />
</IconButton>
<PopoverTip />
请注意，弹出窗口功能工作良好，我也传递该事件。currentttarget，它实际上是当前元素
我面临的唯一问题是放置弹出窗口
这有点晚了，但我刚刚在我自己的项目中修复了这个问题。
由于拼写错误，我将undefined传递给<Popover>组件的anchorEl支柱。如果没有有效的锚点，Popover默认位于viewport的左上角，
当我将弹出窗口组件设置为无状态，然后将其导入父容器中时，就发生了这种情况。我忘了把anchorEl作为道具，结果在左上角出现了一个菜单。似乎默认情况下，如果弹出窗口出现错误，菜单会这样做。