title: How to close a Drawer from another React Component?
body: <p>I want to close my EventDetailsDrawer from the HomePageContent Component. In the EventDetailsDrawer Component, there is a callback function <code>onClose()</code>. When the Drawer is opening, i can use the <code>onClose()</code> Function to close the drawer by clicking anywhere outside the drawer. How can i use these function in my HomePageContent Component? </p>
  
  <p>I use <a href="https://ant.design/components/drawer/" rel="nofollow noreferrer">the Drawer from ant.design</a>.
  Here are my to Components:</p>
  
  <p><strong>The HomePageContent:</strong></p>
  
  <pre><code>class HomePageContent extends Component {
  
  constructor() {
      super();
      this.state = {
          showDrawer: false,
      };
      this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
      this.setState({
          showDrawer: !this.state.showDrawer
      });
  }
  
  render() {
      return (
          &lt;div&gt;
              &lt;CreateEventButton&gt;&lt;/CreateEventButton&gt;
              &lt;br /&gt;
              &lt;List
                  grid={{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4 }}
                  dataSource={data}
                  renderItem={item =&gt; (
                      &lt;List.Item&gt;
                          &lt;div onClick={this.handleClick}&gt;
                          &lt;EventCard 
                              title={item.title}
                              descp={item.description}
                              date={item.date}
                              location={item.location}
                              owner={item.owner}
                          &gt;
                          &lt;/EventCard&gt;
                          &lt;/div&gt;
                          &lt;EventDetailsDrawer 
                              showDrawer={this.state.showDrawer}
                              title = {item.title}
                          &gt;
                          &lt;/EventDetailsDrawer&gt;
                      &lt;/List.Item&gt;
                  )}
              /&gt;
              &lt;EventDetailsDrawer showDrawer={this.state.showDrawer}&gt;&lt;/EventDetailsDrawer&gt;
          &lt;/div&gt;
      );
   }
  
  }
  
  export default HomePageContent
  </code></pre>
  
  <p><strong>EventDetailsDrawer</strong></p>
  
  <pre><code>class EventDetailsDrawer extends Component {
  //state = { visible: false };
  
  /*showDrawer = () =&gt; {
    this.setState({
      visible: true,
    });
   };
  
  onClose = () =&gt; {
    this.setState({
      visible: false,
    });
  };*/
  
   render() {
    return (
        &lt;Drawer
          title="Event Details"
          placement="right"
          closable={false}
          onClose={this.onClose}
          visible={this.props.showDrawer}
         &gt;
          &lt;p&gt;&lt;/p&gt;
          &lt;p&gt;Some contents...&lt;/p&gt;
          &lt;p&gt;Some contents...&lt;/p&gt;
         &lt;/Drawer&gt;
      );
    }
  }
  
  export default EventDetailsDrawer
  </code></pre>
  
  <p>Thanks for your answer and our help</p>