javascript - 通过 onClick 图像关闭material-ui对话框

Question

我正在尝试添加可点击的图像来关闭 Material 用户界面对话框。当我在对话框外部单击时，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

我通过向 Svg 组件添加一个名为 onClick 的 Prop 来解决这个问题。如果有人需要，这里是 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;