Реактив-портал на открытом не стрельбе - PullRequest
Новая
       5

Реактив-портал на открытом не стрельбе

0 голосов
/ 31 марта 2020

Попытка перехода с react-portal с v2 на v4 из-за недавнего обновления React до 16.8.6.

Застрял на портале, в результате чего диалоговое окно не отображается, даже когда 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.

1 Ответ

0 голосов
/ 22 апреля 2020

Заканчивается, понял, что это из-за openByClickOn больше не поддерживается. Как объяснено в:

openByClickOn Не поддерживается в React-Portal v4

...