React에서 팝업 또는 모달 구성 요소 만들기
8108 단어 beginnerswebdevreactreactnative
class Popup extends React.Component {
render() {
return (
<div className='popup'>
<div className='popup_inner'>
<h1>{this.props.text}</h1>
<button onClick={this.props.closePopup}>Close</button>
</div>
</div>
);
}
}
이제
class App extends React.Component {
constructor() {
super();
this.state = {
showPopup: false
};
}
togglePopup() {
this.setState({
showPopup: !this.state.showPopup
});
}
render() {
return (
<div className='app'>
<button onClick={this.togglePopup.bind(this)}>Show Popup</button>
{this.state.showPopup ?
<Popup
text='This is React Popup'
closePopup={this.togglePopup.bind(this)}
/>
: null
}
</div>
);
}
};
반응 팝업 구성 요소 CSS
.popup {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
padding: 1rem;
background-color: rgba(0,0,0, 0.5);
}
.popup_inner {
position: absolute;
left: 25%;
right: 25%;
top: 25%;
bottom: 25%;
margin: auto;
background: white;
padding: 1rem;
}
구독 좋아요 공유와 긍정적인 피드백을 해주세요.
더 많은 자습서를 보려면 visit my website .
감사:)
행복한 코딩 :)
Reference
이 문제에 관하여(React에서 팝업 또는 모달 구성 요소 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/readymadecode/create-popup-or-modal-component-in-react-3e3b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
