Question

我想从HomePageContent组件关闭EventDetailsDrawer。在EventDetailsDrawer组件中，有一个回调函数onClose()。打开抽屉时，我可以使用onClose()函数通过单击抽屉外部的任何位置来关闭抽屉。如何在HomePageContent组件中使用这些功能？

我使用the Drawer from ant.design。这是我的组件：

首页内容：

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 />

如何从另一个React组件关闭一个抽屉？

1 个答案: