Блог

Поппер с включенным ClickAwayListener запускает все функции onClick дочерних компонентов. Каков был бы правильный способ предотвратить это? Если вам нужна дополнительная информация, пожалуйста, дайте мне знать!

Родительский код:

 <Popper
                    open={Boolean(this.state.openNotification)}
                    anchorEl={this.state.openNotification}
                    placement='bottom-end'
                    disablePortal={true}
                    transition
                >
                    {({TransitionProps, placement}) => (
                        <Grow {...TransitionProps} id="notification-menu-list-grow">
                            <Paper className={classes.notificationsPaper}>

                                <ClickAwayListener onClickAway={this.handleCloseNotification.bind(this)}>
                                    {this.state.notificationList.length > 0 ?
                                        <List>
                                            {
                                                this.state.notificationList.map((notification, index) =>
                                                    <NotificationListItem key={index} id={notification._id}
                                                                          type={notification.type}
                                                                          title={notification.title}
                                                                          read={notification.read}
                                                                          timestamp={notification.timestamp}/>)
                                            }
                                        </List>
                                    :
                                        <Typography className={classes.noNotifText}>Keine Benachrichtigungen</Typography>
                                    }
                                </ClickAwayListener>

                                <IconButton edge="end" aria-label="delete all" className={classes.deleteAllIConButton} onClick={this.deleteAllNotifications()}>
                                    <ClearAllIcon/>
                                </IconButton>
                            </Paper>
                        </Grow>
                    )}
                </Popper>
 

Дочерний компонент:

 return (
        <ListItem id={props.id}>
            <ListItemText className={!props.read ? classes.notificationHeaderTitleUnread : classes.notificationHeaderTitle}
                          primary={props.title} secondary={props.timestamp}/>
            <ListItemSecondaryAction>
                <IconButton edge="end" aria-label="delete" onClick={deleteNotification()}>
                    <DeleteOutlineIcon/>
                </IconButton>
            </ListItemSecondaryAction>
        </ListItem>
    );
 

Поскольку мой комментарий решил проблему, следовательно, я опубликую его в качестве ответа.

Пожалуйста, измените свой onClick на onClick={() => deleteNotification()} .

• onClick={() => deleteNotification()} является объявлением функции, т. е. вы передали функцию.
• Записывая onClick={deleteNotification()} , вы вызываете функцию удаления, а не передаете ее.