首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >反应-门户onOpen不发射

反应-门户onOpen不发射
EN

Stack Overflow用户
提问于 2020-03-31 05:28:13
回答 1查看 282关注 0票数 0

由于最近将react-portal升级到16.8.6,一直试图从v2迁移到v4。

放置在门户上,这样即使在isOpen=true时,对话框也不会出现。发现onOpen没有开火。对我该如何修改密码有什么建议吗?

代码语言:javascript
复制
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来查看对话框的存在。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-22 11:13:09

最终意识到这是由于openByClickOn不再受支持。如下文所述:

openByClickOn Not Supported In React-Portal v4

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60943975

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档