web-dev-qa-db-de.com

Show Dialog on React material-ui

Ich verwende material-ui's Dialogkomponente für meine React-Anwendung. Wie setze ich meine Komponente auf eine Variable, damit ich die onShow()-Methode aufrufen kann?

javascriptreactjsmaterial-ui
6
tinazheng

Wenn Sie die Dialog-Komponente hinzufügen, fügen Sie einfach eine ref hinzu (ref="dialog" zum Beispiel):

<Dialog ref="dialog" title="..." actions="...">
  dialog content
</Dialog>

Und dann können Sie es mit this.refs.dialog.onShow(...) von Ihrem Eigentümerkomponentencode aus referenzieren.

Die Dialog-Komponente verwendet tatsächlich Refs hinter den Kulissen, wie Sie an ihrem Quellcode sehen können.

7
lyosef

Ich empfehle, Dan Abramovs Antwort zu lesen, wie man einen Modal in React implementiert.

Um den Material-Ui-Dialog zu verwenden, können Sie DeletePostModal in seinem Beispiel durch Folgendes ersetzen:

import { deletePost, hideModal } from '../actions';
import React, {Component} from 'react';
import {connect} from "react-redux";
import {Button, Dialog, DialogActions, DialogTitle} from "material-ui";
import PropTypes from 'prop-types';

const DeletePostModal = ({ post, dispatch }) => (
  <Dialog open={true}>
       <DialogTitle>Delete post {post.name}?</DialogTitle>
            <DialogActions>
                 <button onClick={() => {
                      dispatch(deletePost(post.id)).then(() => {
                           dispatch(hideModal());
                      });
                  }}>
                        Yes
                  </button>
                  <button onClick={() => dispatch(hideModal())}>
                        Nope
                  </button>
        </DialogActions>
   </Dialog>
)

export default connect(
  (state, ownProps) => ({
    post: state.postsById[ownProps.postId]
  })
)(DeletePostModal)
1
chenop