手把手教你封裝一個Modal元件

薔薇愛學習發表於2018-10-02

環境搭建

用 create-react-app 快速搭建一個 react 的開發環境，沒有用過的童鞋可參考官網

什麼是 modal

標題區
內容區
控制區
mask

modal 骨架實現

修改src/modal/index.jsx

import React from 'react';

export default class Modal extends React.Component {
	render() {
		return (
			<div>
				<div>
					<div>標題區</div>
					<div>內容區</div>
					<div>
						<button>取消</button>
						<button>確定</button>
					</div>
				</div>
				<div>mask</div>
			</div>
			)
	}
}
複製程式碼

modal 樣式實現

修改src/modal/index.jsx

import React from 'react';

export default class Modal extends React.Component {
	render() {
		return (
			<div className='wrapper'>
				<div className='modal'>
					<div className='title'>標題區</div>
					<div className='content'>內容區</div>
					<div className='operator'>
						<button className='close'>取消</button>
						<button className='confirm'>確定</button>
					</div>
				</div>
				<div className='mask'>mask</div>
			</div>
			)
	}
}
複製程式碼

修改 src/modal/index.css

.modal {
	width: 300px;
	height: 200px;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 2000;
	background: #fff;
	border-radius: 2px;
	box-shadow:  inset 0 0 1px 0 #000;
}

.title {
	width: 100%;
	height: 50px;
	line-height: 50px;
	padding: 0 10px;
}

.content {
	width: 100%;
	height: 100px;
	padding: 0 10px;
}

.operator {
	width: 100%;
	height: 50px;

}

.close, .confirm {
	width: 50%;
	border: none;
	outline: none;
	color: #fff;
	background: #4CA791;
	cursor: pointer;
	
}
.close:active, .confirm:active {
	opacity: 0.6;
	transition: opacity 0.3s;
}

.mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000;
	opacity: 0.6;
	z-index: 1000;
}
複製程式碼

效果如圖所示：

modal 功能開發

先思考一下 modal 元件需要實現哪些基本功能：

可以通過 visible 控制 modal 的顯隱
標題區和內容區可以自定義顯示內容
點選取消關閉 modal, 同時會呼叫名為 onClose 的回撥
點選確認會呼叫名為 onConfirm 的回撥，並關閉 modal
點選蒙層 mask 關閉 modal
animate 欄位可以開啟/關閉動畫

控制 modal 顯隱

修改 src/modal/index.jsx

import React from 'react';

import './index.css';

export default class Modal extends React.Component {
	constructor(props) {
		super(props)
	}
	render() {
		// 通過父元件傳遞的 visible 控制顯隱
		const { visible = true } = this.props
		return visible &&
		(
			<div className='wrapper'>
				<div className='modal'>
					<div className='title'>標題區</div>
					<div className='content'>內容區</div>
					<div className='operator'>
						<button className='close'>取消</button>
						<button className='confirm'>確定</button>
					</div>
				</div>
				<div className='mask'>mask</div>
			</div>
		)
	}
}
複製程式碼

修改 src/App.js, 通過一個 Button 來控制 modal 的顯隱

import React, { Component, Fragment } from 'react';
import Modal from './modal';
import './App.css';


class App extends Component {
	constructor(props) {
		super(props)
		this.state = {
			visible: false,
		}
	}
	showModal = () => {
			this.setState({
				visible: true,
			});
	}
  render() {
  	const { visible } = this.state
    return (
    	<Fragment>
	    	<Modal visible={visible}/ >
	    	<button onClick={() => this.showModal()} style={{
	    		'background': '#4CA791',
	    		'color': '#fff',
	    		'border': 'none',
	    		'width': 300,
	    		'height': 50,
	    		'fontSize': 30,
	    	}}>切換顯隱</button>
    	</Fragment>
      
    );
  }
}

export default App;

複製程式碼

標題區和內容區可自定義

修改 src/modal/index.jsx

import React from 'react';

import './index.css';

export default class Modal extends React.Component {
	constructor(props) {
		super(props)
	}
	render() {
		// 通過父元件傳遞的 visible 控制顯隱
		const { visible = true, title, children } = this.props
		return visible &&
		(
			<div className='wrapper'>
				<div className='modal'>
					<div className='title'>{title}</div>
					<div className='content'>{children}</div>
					<div className='operator'>
						<button className='close'>取消</button>
						<button className='confirm'>確定</button>
					</div>
				</div>
				<div className='mask'>mask</div>
			</div>
		)
	}
}
複製程式碼

修改 src/App.js, 從外部傳入自定義的 ‘title' 和 ‘content'

import React, { Component, Fragment } from 'react';
import Modal from './modal';
import './App.css';

class App extends Component {
	constructor(props) {
		super(props)
		this.state = {
			visible: false,
		}
	}
	showModal = () => {
			this.setState({
				visible: true,
			});
	}
  render() {
  	const { visible } = this.state
    return (
    	<Fragment>
	    	<Modal
	    	visible={visible}
	    	title='這是自定義的title'>
	    	這是自定義的content
	    	</Modal>
	    	<button onClick={() => this.showModal()} style={{
	    		'background': '#4CA791',
	    		'color': '#fff',
	    		'border': 'none',
	    		'width': 300,
	    		'height': 50,
	    		'fontSize': 30,
	    	}}>切換顯隱</button>
    	</Fragment>
      
    );
  }
}

export default App;

複製程式碼

控制區功能及蒙層點選功能

要實現點選取消按鈕關閉 modal, 那麼就需要在 modal 中維護一個狀態，然後用這個狀態來控制 modal 的顯隱，好像可行
但是前面我們是通過父元件的 visible 控制 modal 的顯隱，似乎矛盾
要結合起來，只通過 state 來控制 modal 的顯隱，props 改變只會改變 state

修改 src/modal/index.jsx

import React from 'react';

import './index.css';

export default class Modal extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			visible: false
		}
	}
	
	// 首次渲染使用父元件的狀態更新 modal 中的 visible 狀態，只呼叫一次
	componentDidMount() {
		this.setState({
			visible: this.props.visible
		})
	}

	// 每次接收 props 就根據父元件的狀態更新 modal 中的 visible 狀態，首次渲染不會呼叫
	componentWillReceiveProps(props) {
		this.setState({
			visible: props.visible
		})
	}

	handleClose = () => {
		const { onClose } = this.props
		onClose && onClose()
		this.setState({
			visible: false
		})
	}
	handleConfirm = () => {
		const { onConfirm } = this.props
		onConfirm && onConfirm()
		this.setState({
			visible: false
		})
	}
	handleMask = () => {
		this.setState({
			visible: false
		})
	}
	render() {
		// 通過父元件傳遞的 visible 控制顯隱
		const { title, children } = this.props

		const { visible = true } = this.state

		return visible &&
		(
			<div className='wrapper'>
				<div className='modal'>
					<div className='title'>{title}</div>
					<div className='content'>{children}</div>
					<div className='operator'>
						<button className='close' onClick={this.handleClose}>取消</button>
						<button className='confirm' onClick={this.handleConfirm}>確定</button>
					</div>
				</div>
				<div className='mask' onClick={this.handleMask}>mask</div>
			</div>
		)
	}
}
複製程式碼

修改 src/App.js, 從外部傳入自定義的 onClose 和 onConfirm

import React, { Component, Fragment } from 'react';
import Modal from './modal';
import './App.css';



class App extends Component {
	constructor(props) {
		super(props)
		this.state = {
			visible: false,
		}
	}
	showModal = () => {
			this.setState({
				visible: true,
			});
	}
	onClose = () => {
		console.log('onClose');
	}
	onConfirm = () => {
		console.log('onConfirm');
	}
  render() {
  	const { visible } = this.state
    return (
    	<Fragment>
	    	<Modal
	    	visible={visible}
	    	title='這是自定義的title'
	    	onClose={this.onClose}
	    	onConfirm={this.onConfirm}
	    	>
	    	這是自定義的content
	    	</Modal>
	    	<button onClick={() => this.showModal()} style={{
	    		'background': '#4CA791',
	    		'color': '#fff',
	    		'border': 'none',
	    		'width': 300,
	    		'height': 50,
	    		'fontSize': 30,
	    	}}>切換顯隱</button>
    	</Fragment>
      
    );
  }
}

export default App;

複製程式碼

react封裝一個可自定義內容的modal彈框元件
2019-02-16
React封裝元件
手把手教你封裝 Vue 元件，並使用 npm 釋出
2018-07-11
封裝Vue元件NPM
一步一步帶你封裝基於react的modal元件
2018-09-22
封裝React元件
公司需求系列:js封裝一個移動端modal框
2019-04-12
JS封裝
如何用React寫一個Modal元件
2019-04-08
React元件
手把手教你擼一個React元件庫（超詳細）
2020-05-15
React元件
手把手教你釋出一個vue元件到npm上
2019-03-01
Vue元件NPM
手把手教你寫一個微信小程式日曆元件
2019-05-02
微信小程式元件
手把手教你實現一個 Vue 進度條元件！
2018-11-16
Vue元件
如何基於 React 封裝一個元件
2021-11-27
React封裝元件
手把手教你開發 Vue 元件 ( 一)
2017-01-06
Vue元件
封裝一個簡單的日曆元件
2020-09-27
封裝元件
封裝一個優雅的element ui表格元件
2019-02-16
封裝UI元件
手把手教你封裝自己的圖片快取工具-ImageLoader
2017-12-26
封裝快取
小程式自定義modal彈窗封裝實現
2018-06-14
封裝
手把手教你寫一個java的orm（一）
2019-01-19
JavaORM
手摸手教你封裝跨專案複用的 Vue 元件
2019-04-28
封裝Vue元件
封裝一個元件 + 函式惰性思想（重寫應用）
2018-05-19
封裝元件函式
手把手教你搭建一個 Elasticsearch 叢集
2018-10-17
Elasticsearch
手把手教你寫一個SpringMVC框架
2022-03-18
SpringMVC框架
手把手教你擼一個 Webpack Loader
2018-01-25
Web
手把手教你寫一個react validator
2017-09-28
React
手把手教你擼vue全域性元件
2019-01-30
Vue元件
手把手教你快速搭建React元件庫
2022-07-12
React元件
宜信開源|手把手教你安裝第一個LAIN應用
2019-07-01
AI
手把手教你安裝Lotus Domino7.0 (一)
2011-05-15
【vue3 + ts + echarts】封裝一個通用echarts元件-2.0版
2023-05-08
VueEcharts封裝元件
封裝Vue元件的一些技巧
2019-04-15
封裝Vue元件
手把手教你做一個快取工具
2020-07-04
快取
手把手教你擼一個簡易的 webpack
2019-03-03
Web
手把手教你寫一個java的orm（三）
2019-01-21
JavaORM
手把手教你實現一個引導動畫
2018-10-07
動畫
手把手教你寫一個java的orm（五）
2019-01-23
JavaORM
手把手教你釋出一個Python包
2018-08-07
Python
手把手教你實現一個完整的 Promise
2016-11-15
Promise
vue元件封裝指南
2019-04-30
Vue元件封裝
封裝UI元件庫
2024-04-02
封裝UI元件
手把手教你搭建自己的Angular元件庫
2020-05-14
Angular元件

手把手教你封裝一個Modal元件

環境搭建

目錄

什麼是 modal

modal 骨架實現

modal 樣式實現

modal 功能開發

控制 modal 顯隱

標題區和內容區可自定義

控制區功能及蒙層點選功能

相關文章