javascript - 无法在 Material UI 中获取 Popper
问题描述
Material-UI 版本
"@material-ui/core": "^3.7.0"
我需要在某些东西上悬停时显示 Popper,但我看不到 Popper
这是波普尔的容器
import PropTypes from 'prop-types';
import React from 'react';
import InfoCard from './InfoCard';
import Snackbar from '@material-ui/core/Snackbar';
class ContainerInfoCard extends React.Component {
state = {
copyNotify: false,
//
openCard: false,
anchorEl: null,
};
onUserHoverHandle = event => {
const { currentTarget } = event;
this.setState({
anchorEl: currentTarget,
openCard: true
});
};
handleCloseUserCard = event => {
this.setState({
anchorEl: null,
openCard: false,
});
};
handleSnackbarClose = (e) => {
e && e.preventDefault();
this.setState({
copyNotify: false,
});
};
render() {
const { children } = this.props;
const id = openCard ? 'popper-card' : null;
return(
<div>
<div onMouseLeave={this.handleCloseUserCard}>
<div
onMouseEnter={this.onUserHoverHandle}
aria-describedby={id}
>
{children}
</div>
{ openCard && (
<InfoCard
id={id}
node={anchorEl}
fullName="Full name"
emailAddress="example@gmail.com"
open={openCard}
/>
)}
</div>
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
open={this.state.copyNotify}
onClose={this.handleSnackbarClose}
autoHideDuration={1000}
ContentProps={{
'aria-describedby': 'message-id',
}}
message={<span id="message-id"> Email copied</span>}
/>
</div>
);
}
}
export default ContainerInfoCard;
InfoCard - 这个有 Popper
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Popper from '@material-ui/core/Popper';
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Fade from "@material-ui/core/Fade";
const styles = theme => ({
root: {
pointerEvents: 'none',
},
paper: {
minWidth: '300px',
minHeight: '60px',
padding: theme.spacing.unit * 2,
},
});
class InfoCard extends React.Component {
render() {
const {
classes,
fullName,
emailAddress,
open,
node,
id,
} = this.props;
return(
<Popper
id={id}
open={open}
anchorEl={node}
placement="left-start"
modifiers={{
preventOverflow: {
enabled: true,
boundariesElement: 'viewport',
},
}}
transition
>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}>
<Paper className={classes.paper}>
<Grid container>
<Grid item>
{fullName}
</Grid>
<Grid item>
{emailAddress}
</Grid>
</Grid>
</Grid>
</Paper>
</Fade>
)}
</Popper>
);
}
}
export default InfoCard;
我不能只看到波普尔。但是如果我删除 Popper 组件,我可以看到 Paper 组件。我认为波普尔有问题。
你能帮我吗?
解决方案
你确定你的popper真的打开了吗?
open={true}
您可以通过在 popper 组件中进行设置并查看呈现的内容来调试它。
在我看来,您正在将一个未定义的变量传递给您的 open 道具,这可以解释为什么您的 popper 没有显示。在您的容器组件中,您有以下行:open={openCard}
。这应该是open={this.state.openCard}
。
推荐阅读
- asp.net - 获取正确的控制器模型的问题
- javascript - 如何切换 nativeElement
- c++ - Qt中的自动排他工具按钮
- ansible - Ansible 如何使用循环在一台主机上同时运行多个任务
- angular - 派生类测试。失败:无法解析所有参数:(?,?)(Angular 5)
- python - 值列表彼此的余弦相似度
- java - Android可以将图像作为输入流插入吗?
- javascript - 重定向我的 js 代码后,我刷新页面后才起作用
- javascript - 如何在javascript中从“datetime-local”转换为mysql.Timestamp
- excel - 如何将数组中的数据传递到html正文的一部分