Javascript “子组件”对话框未关闭

我在父组件中有一个按钮，我使用它关闭子组件中的对话框

父组件

handleMsgOpen = () => {
    console.log('open called')
    this.setState({ showMsg: true });
  }
handleMsgClose = () => {
    console.log('close called');
    this.setState({ showMsg: false });
    // this.props.authContext.logOut();
  }

render{
return(
...some code
{this.state.showNotificationBell === true ?
              < div className={styles.bell} onClick={this.handleMsgOpen}>
                <img className={styles.bellIcon} src={'./DrawerAssets/bell.svg'} alt='bell' />
                <div className={styles.bellNumber}>1</div>
                <Msg
                  showMsg={this.state.showMsg}
                  handleMsgOpen={this.handleMsgOpen}
                  handleMsgClose={this.handleMsgClose}
                />
              </div> : null}
...some code
)
}

handleMsgOpen=（）=>{
log（'opencalled'）
this.setState（{showMsg:true}）；
}
handleMsgClose=（）=>{
log（'close called'）；
this.setState（{showMsg:false}）；
//this.props.authContext.logOut（）；
}
渲染{
返回(
…一些代码
{this.state.showNotificationBell===真？

1.
：null}
…一些代码
)
}

Msg组件（子组件）

从“React”导入React；
进口{
网格、排版、容器、盒子、圆形进度、，
对话框，对话框操作，对话框内容，按钮，对话框标题，
}来自“@material ui/core”；
导出接口MsgProps{
showMsg：布尔型；
把手打开：任何；
handleMsgClose：任何；
}
导出接口MsgState{
}
类Msg扩展了React.Component{
handleMsgOpen=（）=>{
this.props.handleMsgOpen（）；
}
handleMsgClose=（）=>{
this.props.handleMsgClose（）；
}
render（）{
console.log（'boolean'，this.props.showMsg）；
返回(
消息标题
消息内容
注销
);
}
}
导出默认消息；

第一次单击钟形图标时，对话框将正确打开。但当我关闭它时，show Msg将更改为false，这很好，但再次在父组件中调用handleMsgOpen，show Msg将更改回true，这不会使对话框关闭

---

重新呈现父组件时是否可以触发onclick，但为什么在第一次加载父组件时不会触发onclick？

不要将图标和消息放在同一个div中

这里的问题是，每当您单击消息以关闭它时，您的单击处理程序就会冒泡到图标中的父级，因为它被另一个单击处理程序的div包围。基本上，您的子组件单击处理程序被注册，然后单击处理程序被冒泡到父组件并再次注册

这称为事件冒泡。 你可以看看这个

1.
import React from 'react';

import {
    Grid, Typography, Container, Box, CircularProgress,
    Dialog, DialogActions, DialogContent, Button, DialogTitle,

} from '@material-ui/core';


export interface MsgProps {
    showMsg: boolean;
    handleMsgOpen: any;
    handleMsgClose: any;
}

export interface MsgState {
}

class Msg extends React.Component<MsgProps, MsgState> {

    handleMsgOpen = () => {
        this.props.handleMsgOpen();
    }

    handleMsgClose = () => {
        this.props.handleMsgClose();
    }

    render() {
        console.log('boolean', this.props.showMsg);
        return (
            <div>
                <Dialog open={this.props.showMsg} onClose={this.handleMsgClose}>
                    <DialogTitle className="MsgTitle">Message title </DialogTitle>
                    <DialogContent className="MsgContent">Message Content</DialogContent>
                    <DialogActions>
                        <Grid container justify="center" spacing={2} style={{ paddingBottom: "2%" }}>
                            <Grid item>
                                <Button onClick={this.handleMsgClose} className="MsgButton" variant="outlined">
                                    <div className="MsgLabel">
                                        Logout
                                    </div>
                                </Button>
                            </Grid>
                        </Grid>
                    </DialogActions>
                </Dialog>
            </div>
        );
    }
}

export default Msg;

<div 
  className={styles.bell} 
  onClick={this.handleMsgOpen}
>
  <img 
    className={styles.bellIcon} 
    src={'./DrawerAssets/bell.svg'}
     alt='bell' 
    />
    <div className={styles.bellNumber}>1</div>
</div> <--- Seperate the div here.

<Msg
  showMsg={this.state.showMsg}
  handleMsgOpen={this.handleMsgOpen}
  handleMsgClose={this.handleMsgClose}
/>