reactjs - 材质 UI 弹出框不适用于反应类组件
问题描述
我之前没有使用过材质 UI,它的所有文档都参考了功能组件。我不知道为什么弹出框不起作用。每当我将鼠标悬停在文本上时,都会触发该功能,但会出现弹出窗口。我可以使用 this.props.classes 访问类。如果有人可以提供帮助,那就太好了。
import React, { Component } from "react";
import Popover from "@material-ui/core/Popover";
import Typography from "@material-ui/core/Typography";
import { withStyles } from "@material-ui/core/styles";
const useStyles = (theme) => ({
root: {
backgroundColor: "red",
height: "30px",
},
lable: {
transform: "translate(5px, 2px) scale(1)",
pointerEvents: "none",
width: "100%",
height: "100%",
padding: "10px",
color: "red",
},
popover: {
pointerEvents: "none",
color:"pink"
},
paper: {
padding: theme.spacing(1),
},
etc:{
color: "red"
}
});
class SomeThing extends Component {
open;
constructor(props){
super(props)
this.handlePopoverClose = this.handlePopoverClose.bind(this);
this.handlePopoverOpen = this.handlePopoverOpen.bind(this);
this.state={
anchorEl: null,
}
}
componentDidMount(){
this.open = Boolean(this.state.anchorEl);
}
handlePopoverOpen = (event) => {
console.log("triggered!!!", event.currentTarget.innerText);
this.setState({ anchorEl: event.currentTarget.innerText });
};
handlePopoverClose = () => {
console.log("triggered again!!!", this.props);
this.setState({ anchorEl: null });
};
render() {
return (
<div>
<Typography
aria-owns={this.open ? "mouse-over-popover" : undefined}
aria-haspopup="true"
className={this.props.classes.etc}
onMouseEnter={this.handlePopoverOpen}
onMouseLeave={this.handlePopoverClose}
>
Hover with a Popover.
</Typography>
<Popover
id="mouse-over-popover"
className={this.props.classes.popover}
classes={{
paper: this.props.classes.paper
}}
open={this.open}
anchorEl={this.state.anchorEl}
anchorOrigin={{
vertical: "bottom",
horizontal: "left"
}}
transformOrigin={{
vertical: "top",
horizontal: "left"
}}
onClose={this.handlePopoverClose}
disableRestoreFocus
>
<Typography>I use Popover.</Typography>
</Popover>
</div>
);
}
}
export default withStyles(useStyles)(SomeThing);
解决方案
你可以定义你open
的render
方法;这样,open
将始终是 aboolean
并且不会设置为undefined
- 这就是它不起作用的原因。
render() {
const open = Boolean(this.state.anchorEl);
return (
<div>
<Typography
aria-owns={open ? "mouse-over-popover" : undefined}
aria-haspopup="true"
className={this.props.classes.etc}
onMouseEnter={this.handlePopoverOpen}
onMouseLeave={this.handlePopoverClose}
>
Hover with a Popover.
</Typography>
...
</div>
);
}
推荐阅读
- apache-spark - spark-jdbc连接中的numPartitions、lowerBound、upperBound如何操作?
- javascript - 更改仅单击视图而不是所有视图的样式
- javascript - 导航到另一个 html 页面后如何在下拉列表中显示所选值?
- r - R编程代码修正
- java - Selenium WedDriver - 多个 Java 类
- javascript - 按下按钮时,使用 Javascript 突出显示 HTML 中的选项卡
- django - Django:在字段中维护一个计数器(竞争条件)
- r - R - 在 Shiny 中使用反应数据集绘制 Plotly 图的问题
- laravel-5.6 - SQLSTATE [23000]:违反完整性约束:尝试迁移时,laravel
- reactjs - 在 redux 存储中处理来自 API 的排序和过滤集合