Javascript 在 React material-ui 上显示对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32148412/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show Dialog on React material-ui
提问by tinazheng
I'm using material-ui's Dialog componentfor my React application. How do I set my component to a variable so that I can call the onShow()method?
我正在为我的 React 应用程序使用 material-ui 的Dialog 组件。如何将我的组件设置为一个变量，以便我可以调用该onShow()方法？
采纳答案by lyosef
When adding the Dialogcomponent, just add a ref to it (ref="dialog"for example):
添加Dialog组件时，只需为其添加一个引用（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 componentpage actually uses refs behind the scenes, as you can see from its source code.
回答by chenop
I recommend reading Dan Abramov's answeron how to implement a modal in React.
我建议阅读Dan Abramov关于如何在 React 中实现模态的回答。
In order to use material-ui dialog you can replace the DeletePostModalin 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)
