머리말
프로젝트에서 대화 상자와 확인 상자는 자주 사용되는 구성 요소입니다.여기에는 react-Ant Design 프레임워크에서 기본 사용에 대한 기록이 있습니다.
기본 대화 상자
먼저 필요에 따라 사용해야 하는 구성 요소를 소개해야 합니다.
import {
Card, Button, Modal} from 'antd'
기본 대화 상자의 팝업을 제어하는 두 개의 버튼을 정의합니다.
<Card title="基础对话框">
<Button type="primary" onClick={
() => this.handleOpen('showModal')}>Open</Button>
<Button type="primary" onClick={
() => this.handleOpen('showModal2')}>Open</Button>
</Card>
여기에서 속성 값을 동적으로 설정하고 showModa가 true가 되도록 해야 합니다.
state = {
showModal: false,
showModal2: false
}
handleOpen(type) {
this.setState({
[type]: true // 动态设置属性值
})
}
마지막으로 팝업 상자의 내용을 작성하고 Modal을 사용하여 래핑합니다.
visible 값은 팝업 상자의 표시 및 닫기를 제어하고 onOk 및 onCancel은 확인 및 취소에 의해 트리거되는 이벤트입니다.
<Modal
title="React11111"
visible={
this.state.showModal}
onOk={
() => {
this.setState({
showModal: false})
}}
onCancel={
() => {
this.setState({
showModal: false})
}}>
<p>这里是一些内容...</p>
<p>这里是一些内容...</p>
<p>这里是一些内容...</p>
</Modal>
<Modal
title="React22222"
visible={
this.state.showModal2}
onOk={
() => {
this.setState({
showModal2: false})
}}
onCancel={
() => {
this.setState({
showModal2: false})
}}>
<p>这里是一些内容...</p>
<p>这里是一些内容...</p>
<p>这里是一些内容...</p>
</Modal>
효과:
정보 확인 상자
여전히 동일하지만 버튼이 트리거되고 표시됩니다.
this.handleConfirm의 다른 매개변수를 통해 확인 상자의 다양한 색상 스타일을 제어합니다.
<Card title="信息确认">
<Button type="primary" onClick={
() => this.handleConfirm('confirm')}>Open</Button>
<Button type="info" onClick={
() => this.handleConfirm('info')}>Open</Button>
<Button type="success" onClick={
() => this.handleConfirm('success')}>Open</Button>
<Button type="warning" onClick={
() => this.handleConfirm('warning')}>Open</Button>
</Card>
이벤트:
여기서 위의 내용은 type 값을 전달하여 메서드를 공유합니다.
handleConfirm(type) {
Modal[type]({
title: '确认',
content: '好好学习，天天向上',
onOk() {
console.log('OK')
},
onCancel() {
console.log('no OK')
}
})
}
효과:
