प्रतिक्रिया सामग्री पर संवाद दिखाएं- ui

Question

मैं अपने रिएक्ट एप्लिकेशन के लिए सामग्री-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 पढ़ने की अनुशंसा करता हूं।

आदेश सामग्री-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)