在React材質上顯示對話框-ui

Question

我爲我的React應用程序使用material-ui的Dialog component。如何將組件設置爲變量，以便我可以調用onShow()方法？

Answer 1

當添加Dialog組件，只需添加一個裁判它（ref="dialog"爲例）：

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

然後你就可以使用this.refs.dialog.onShow(...)從您的所有者組件代碼中引用。

Dialog component頁面實際上在幕後使用了參考文獻，正如您可以從其source code中看到的那樣。

Answer 2

我建議您閱讀Dan Abramov's answer，瞭解如何在React中實現模態。

爲了使用材料的用戶界面對話框中你可以用下面的更換DeletePostModal在他的例子：

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)