Как закрыть ящик из другого компонента React?

Question

Я хочу закрыть свой EventDetailsDrawer из компонента HomePageContent.В компоненте EventDetailsDrawer есть функция обратного вызова onClose().Когда ящик открывается, я могу использовать функцию onClose(), чтобы закрыть ящик, щелкнув в любом месте за пределами ящика.Как я могу использовать эти функции в моем компоненте HomePageContent?

Использую Выдвижной ящик от ant.design .Вот мои компоненты:

HomePageContent:

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 (
        <div>
            <CreateEventButton></CreateEventButton>
            <br />
            <List
                grid={{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4 }}
                dataSource={data}
                renderItem={item => (
                    <List.Item>
                        <div onClick={this.handleClick}>
                        <EventCard 
                            title={item.title}
                            descp={item.description}
                            date={item.date}
                            location={item.location}
                            owner={item.owner}
                        >
                        </EventCard>
                        </div>
                        <EventDetailsDrawer 
                            showDrawer={this.state.showDrawer}
                            title = {item.title}
                        >
                        </EventDetailsDrawer>
                    </List.Item>
                )}
            />
            <EventDetailsDrawer showDrawer={this.state.showDrawer}></EventDetailsDrawer>
        </div>
    );
 }

}

export default HomePageContent

EventDetailsDrawer

class EventDetailsDrawer extends Component {
//state = { visible: false };

/*showDrawer = () => {
  this.setState({
    visible: true,
  });
 };

onClose = () => {
  this.setState({
    visible: false,
  });
};*/

 render() {
  return (
      <Drawer
        title="Event Details"
        placement="right"
        closable={false}
        onClose={this.onClose}
        visible={this.props.showDrawer}
       >
        <p></p>
        <p>Some contents...</p>
        <p>Some contents...</p>
       </Drawer>
    );
  }
}

export default EventDetailsDrawer

Спасибо за ваш ответи наша помощь

Answer 1

HomePageContent:

<EventDetailsDrawer 
    showDrawer={this.state.showDrawer}
    title = {item.title}
    handleClick = {this.handleClick}
/>

EventDetailsDrawer

<Drawer
    title="Event Details"
    placement="right"
    closable={false}
    onClose={this.props.handleClick}
    visible={this.props.showDrawer}
>
    <p></p>
    <p>Some contents...</p>
    <p>Some contents...</p>
</Drawer>

есть метод, передаваемый как реквизит.удалить второй <EventDetailsDrawer />