画像をクリックしてマテリアルUIダイアログを閉じる

Question

マテリアル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

私はSvgコンポーネントにonClickと呼ばれる小道具を追加して解決しました。

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;