在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)