通过点击图片关闭材质UI对话框

我试图添加可点击的图片来关闭材质UI对话框。当我在对话框外单击但onClick没有响应时，props.onRequestClose正常工作。通过点击图片关闭材质UI对话框

我错过了什么？

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 
};

来源

2017-05-29 Barak Shoushan

你在更新'props.onRequestClose'方法内部父'open'价值？ –

是的，我把'open'的值设置为false。另外，每当我在对话框外单击时，它都会关闭它，所以'props.onRequestClose'应该可以工作。 –

Svg是什么类型的组件？当点击svg时，onClick甚至被解雇了吗？ –

我解决了它通过添加一个道具叫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;

来源

2017-06-05 08:49:09

通过点击图片关闭材质UI对话框

回答

相关问题