react-portal - react-portal onOpen 未触发
问题描述
react-portal
由于最近升级React
到 16.8.6 ,一直在尝试从 v2 迁移到 v4。
卡在 Portal 上,即使isOpen=true
. 发现onOpen
没有开火。关于如何更改代码的任何建议?
import * as React from 'react';
import { Portal } from 'react-portal';
import 'dialog-polyfill/dialog-polyfill.css';
import 'dialog-polyfill/dialog-polyfill.js';
import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from 'react-mdl';
class Confirm extends React.Component {
onOpen() {
if (!this.dialog.showModal) {
dialogPolyfill.registerDialog(this.dialog);
}
this.dialog.showModal();
}
closeDialog() {
this.dialog.close();
this.portal.closePortal();
}
render() {
const props = this.props;
return (
<Portal ref={c => this.portal = c} onOpen={this.onOpen.bind(this)} isOpen={Boolean(props.callback)} {...props}>
<dialog ref={c => this.dialog = c} className="mdl-dialog" style={props.style}>
<DialogTitle>{props.title}</DialogTitle>
<DialogContent>
{props.message}
</DialogContent>
<DialogActions>
<Button type='button' onClick={() => {this.closeDialog(); props.confirm();}}>Confirm</Button>
<Button type='button' onClick={() => {this.closeDialog(); props.dismissConfirmation();}}>Cancel</Button>
</DialogActions>
</dialog>
</Portal>
);
}
}
export default Confirm;
预期结果:弹出一个确认对话框。
在浏览器中,已经可以通过修改 css 看到对话框存在。
解决方案
最终意识到这是由于 openByClickOn 不再受支持。如中所述:
推荐阅读
- javascript - 将不同 DIV 中的数字相加
- angular - 将 Angular 5 迁移到 Angular 7
- python - 在 numpy 数组中裁剪图像
- javascript - 将 props 传递给高阶组件
- python - Django APIView 注销用户会话
- r - 考虑对列进行分组并根据 R 中的其他列选择行
- r - R - dplyr 0.4.1:如何通过函数中的列名进行汇总
- html - (Angular 6 + Postgres)时间输入不能与 db 一起正常工作
- frameworks - 具有单一数据库的教育网站和论坛框架
- spring-boot - 如何强制 Spring Boot OAuth2 自动配置使用另一个 yml 文件而不是 application.yml 文件?