Hiển thị Hộp thoại trên Vật liệu phản ứng-ui

Question

Tôi đang sử dụng Dialog component của material-ui cho ứng dụng React của mình. Làm cách nào để đặt thành phần của tôi thành một biến để tôi có thể gọi phương thức onShow()?

Answer 1

Khi thêm các thành phần Dialog, chỉ cần thêm một ref để nó (ref="dialog" ví dụ):

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

Và sau đó bạn có thể tham khảo nó từ mã thành phần chủ sở hữu của bạn bằng cách sử dụng this.refs.dialog.onShow(...).

Trang Dialog component thực sự sử dụng refs đằng sau hậu trường, như bạn có thể thấy từ số source code.

Answer 2

Tôi khuyên bạn nên đọc Dan Abramov's answer về cách triển khai phương thức trong React.

Để sử dụng hộp thoại liệu-ui bạn có thể thay thế các DeletePostModal trong ví dụ của mình với những điều sau đây:

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)