通過點擊圖片關閉材質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對話框

回答

相關問題