通过单击图像关闭 material-ui 对话框

Question

我正在尝试添加可点击的图像以关闭 material-ui 对话框。 props.onRequestClose 当我在对话框外单击但 onClick 没有响应时，props.onRequestClose 工作正常。

我错过了什么？

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 的道具来解决它。如果有人需要，这里是 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;

通过单击图像关闭 material-ui 对话框

Close material-ui dialog by onClick on an image

javascript

dialog

reactjs

material-ui