web-dev-qa-db-fra.com

Afficher le dialogue sur le matériel de réaction

J'utilise material-ui Composant de dialogue pour mon application React. Comment définir mon composant sur une variable pour pouvoir appeler la méthode onShow()?

javascriptreactjsmaterial-ui
6
tinazheng

Lorsque vous ajoutez le composant Dialog, ajoutez-y simplement une référence (ref="dialog" par exemple):

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

Et vous pouvez ensuite le référencer à partir de votre code de composant propriétaire en utilisant this.refs.dialog.onShow(...).

Le composant Dialog page utilise en réalité des références en coulisses, comme vous pouvez le voir à partir de son code source .

7
lyosef

Je recommande de lire la réponse de Dan Abramov sur la manière de mettre en œuvre un modal dans React.

Pour utiliser le dialogue matériau-interface utilisateur, vous pouvez remplacer le DeletePostModal dans son exemple par ce qui suit:

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