javascript - React material-ui でダイアログを表示

Question

React アプリケーションにmaterial-ui のDialog コンポーネントを使用しています。メソッドを呼び出せるようにコンポーネントを変数に設定するにはどうすればよいonShow()ですか?

Answer 1

コンポーネントを追加するときはDialog、ref を追加するだけref="dialog"です (例):

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

そして、 を使用して、所有者コンポーネント コードから参照できますthis.refs.dialog.onShow(...)。

Dialog コンポーネントページは、ソース コードからわかるように、実際には舞台裏で参照を使用しています。

Answer 2

React でモーダルを実装する方法については、Dan Abramov の回答を読むことをお勧めします。

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)