通過單擊圖片來關閉Material-UI對話框

Question

我正在嘗試添加可點擊的圖像以關閉Material-UI對話框。 當我在對話框外單擊時，props.onRequestClose可以正常工作，但是onClick沒有響應。

我想念什么？

const ChangePasswordDialog = (props) =>  (
        <Dialog open={props.open} onRequestClose={props.onRequestClose} modal={false}>
            <div className="close-popup">
                <Svg onClick={props.onRequestClose} viewBox="0 0 22.75 22.75">{closePopup}
                </Svg >
            </div>
        </Dialog>
);

ChangePasswordDialog.propTypes = {
open:PropTypes.bool.isRequired,
onRequestClose:PropTypes.func.isRequired
};

Answer 1

我通過將一個名為onClick的道具添加到Svg組件中來解決了該問題。 如果有人需要，這是Svg組件的代碼：

class Svg extends Component{
render() {
    const {children, viewBox, onClick} = this.props;
    return(
        <div onClick={onClick}>
            <SvgIcon viewBox={viewBox}>
                {children}
            </SvgIcon>
        </div>
       )
    };
  }

Svg.propTypes = {
   children:PropTypes.any.isRequired,
   viewBox:PropTypes.string,
   onClick:PropTypes.function
 };

export default Svg;