Mostra finestra di dialogo su React material-ui

Question

Sto usando materiale-Dialog component per la mia applicazione React. Come posso impostare il mio componente su una variabile in modo da poter chiamare il metodo onShow()?

Answer 1

Quando si aggiunge la componente Dialog, è sufficiente aggiungere un ref ad esso (ref="dialog" per esempio):

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

E poi si può fare riferimento a esso dal codice del componente proprietario utilizzando this.refs.dialog.onShow(...).

La pagina Dialog component utilizza effettivamente ref dietro le quinte, come potete vedere dal suo source code.

Answer 2

Si consiglia di leggere Dan Abramov's answer su come implementare una modale in React.

Per poter utilizzare il materiale di dialogo-ui è possibile sostituire il DeletePostModal nel suo esempio con il seguente:

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)