0
我對React非常陌生,而且我的代碼如下所示,我想單擊按鈕並使內容消失。希望有人能幫助我解決這個問題。我試過使用狀態,但我沒有得到我想要的結果,我也試過https://jsfiddle.net/uwadhwnr/不起作用。我現在真的很沮喪。在React中將css顯示塊更改爲none
<div id="content" style="height:1000px">
<script type="text/jsx">
var styles = {
container: {
height: '100vh',
width: '100%',
backgroundColor: 'blue',
},
title: {
textAlign: 'center',
},
modal: {
display: 'block',
position: 'fixed',
zIndex: '1',
paddingTop: '100px',
left: '0',
top: '0',
width: '100vw',
height: '100vh',
overflow: 'auto',
backgroundColor: 'rgb(0,0,0)',
backgroundColor: 'rgba(0,0,0,0.4)',
},
modalContent: {
position: 'relative',
backgroundColor: '#fefefe',
margin: 'auto',
padding: '0',
border: '1px solid #888',
width: '80vw',
},
modalHeader: {
padding: '2px 16px',
backgroundColor: '#5cb85c',
color: 'white',
},
modalBody: {padding: '2px 16px'},
modalFooter: {
padding: '2px 16px',
backgroundColor: '#5cb85c',
color: 'white',
},
upload: {
position: 'absolute',
right: '5%',
top: '5%',
},
};
var PopUp = React.createClass({
render: function() {
return (
<div>
<i className="fa fa-plus-circle fa-3x" aria-hidden="true" style={styles.upload} onClick={this.handleClick}></i>
<div id="myModal" className="modal" style={styles.modal}>
<div className="modal-content" style={styles.modalContent}>
<div className="modal-header" style={styles.modalHeader}>
<h2>Modal Header</h2>
</div>
<div classN="modal-body" style={styles.modalBody}>
<p>Some text aa the Modal Body</p>
<p>Some other text...</p>
</div>
<div className="modal-footer" style={styles.modalFooter}>
<h3>Modal Footer</h3>
</div>
</div>
</div>
</div>
);
}
});
var FilterableProductTable = React.createClass({
render: function() {
return (
<div>
<PopUp />
</div>
);
}
});
React.render(
<FilterableProductTable />,
document.getElementById('content'));
</script>
基本上,我想實現的是https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2在陣營 – Greg
這是很容易做到這一點使此功能。只需在「handleClick」函數中調用模態打開函數即可。你爲什麼說這很困難?解釋你面臨的問題。 – Syncro