React Popper with ClickAwayListener 触发所有子组件的 onClick

Question

包含 ClickAwayListener 的 Popper，触发子组件的所有 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>
    );

Answer 1

由于我的评论解决了问题，因此，我将其发布为答案。

请将您的 onClick 更改为 onClick={() => deleteNotification()}。

• onClick={() => deleteNotification()} 是函数声明，即你传递了一个函数。
• 通过编写onClick={deleteNotification()}，您调用的是 deleteNotification 函数，而不是传递它。