[英]Show Dialog on React material-ui
I'm using material-ui's Dialog component for my React application. 我正在使用material-ui的Dialog组件来实现我的React应用程序。 How do I set my component to a variable so that I can call the
onShow()
method? 如何将我的组件设置为变量,以便我可以调用
onShow()
方法?
When adding the Dialog
component, just add a ref to it ( ref="dialog"
for example): 添加
Dialog
组件时,只需添加一个ref(例如ref="dialog"
):
<Dialog ref="dialog" title="..." actions="...">
dialog content
</Dialog>
And then you can reference it from your owner component code by using this.refs.dialog.onShow(...)
. 然后,您可以使用
this.refs.dialog.onShow(...)
从您的所有者组件代码中引用它。
The Dialog component page actually uses refs behind the scenes, as you can see from its source code . Dialog组件页面实际上在幕后使用refs,正如您可以从其源代码中看到的那样。
I recommend reading Dan Abramov's answer on how to implement a modal in React. 我建议阅读Dan Abramov关于如何在React中实现模态的答案 。
In order to use material-ui dialog you can replace the DeletePostModal in his example with the following: 为了使用material-ui对话框,您可以使用以下内容替换其示例中的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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.