Afficher la boîte de Dialogue Réagir sur le matériel-de l'interface utilisateur

Je suis en utilisant le matériau de l'interface utilisateur de Boîte de dialogue composant pour mon Réagir application. Comment puis-je régler mon composant à une variable de sorte que je peux appeler le onShow() méthode?

OriginalL'auteur tinazheng | 2015-08-21

  1. 7

    Lors de l'ajout de la Dialog composant, il suffit d'ajouter un ref (ref="dialog" par exemple):

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

    Et puis vous pouvez référencer votre propriétaire le code du composant en utilisant this.refs.dialog.onShow(...).

    La Boîte de dialogue composant page utilise refs derrière les scènes, comme vous pouvez le voir à partir de son le code source.

    onShow est désormais obsolète: material-ui.com/#/components/dialog et l'ouverture doivent être gérées par le biais de open prop
    Dans tous les exemples, il montre un bouton avec la boîte de dialogue pour le lancement de ce que si je veux me lancer dans la voie de l'OP est de demander ET de masquer la boîte de dialogue bouton..

    OriginalL'auteur lyosef

  2. 1

    Je recommande la lecture de Dan Abramov réponse sur la façon de mettre en œuvre un modal de Réagir.

    Afin d'utiliser le matériel-dialogue de l'interface utilisateur vous pouvez remplacer le DeletePostModal dans son exemple avec les éléments suivants:

    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)

    OriginalL'auteur chenop