react_web自定義組件_多類型Modal

一、帶輸入框的Modal

二、提示框Modal

三、搜索欄Search

在做項目時引入一些現成的UI組件，但是如果和設計圖沖突太大，更改時很麻煩，如果自己寫一個通用組件其實也就幾十分鐘或者幾個小時，而且更具UI設計更改也比較好更改，下面是兩個簡單的通用組件。

采用 react+ts+scss 進行開發。

如果你沒有react+ts+scss項目，請看這個文章。

react項目https://blog.csdn.net/zxy19931069161/article/details/140117004?spm=1001.2014.3001.5501react項目這個文章頂部有一個現成的后臺項目，可以這個基礎上測試組件。

下面開始測試組件：

在src文件夾下新建components文件夾，用來放所有組件。

一、帶輸入框的Modal

效果如下，自行更改特別方便，內容：

在components文件夾下新建文件夾modalInput，modalInput文件夾下新建文件index.tsx和index.scss。

組件代碼：

index.tsx

import './index.scss';
// 需要一個x，關閉圖片，記得將圖片放在這個路徑下assets/images/，圖片叫這個名字 icon-delete.png
import Delete from '../../assets/images/icon-delete.png'
import { useState } from "react";function ModalInput(props: any) {// 輸入的文字，初始值為父元素傳過來的值 props.systemNameData// const [inputValueData, setInputValue] = useState(props.systemNameData)// 輸入的文字，初始值為空字符串const [inputValueData, setInputValue] = useState('')/*** 取消*/function cancleClick() {//執行父組件方法，關閉彈窗并將用戶輸入的值傳給父組件props.sendValueToFather(false, '');setInputValue('')}/*** 確定*/function sureClick() {props.sendValueToFather(false, inputValueData);setInputValue('')}/*** 獲得輸入框輸入的文字* @param event input輸入事件*/function inputValue(event: any) {setInputValue(event.target.value)}return (<div className='modal-input-box'><div className="modal-input-content"><div className="modal-title">應用名稱</div><img className="modal-delete" src={Delete} alt="關閉" onClick={cancleClick} /><div className="modal-line"></div><div className="modal-content"><div className="content-title">應用名稱</div><input className="content-input" type="text" placeholder='請輸入應用名稱' onChange={inputValue} value={inputValueData} /></div><div className="modal-cacle" onClick={cancleClick}>取消</div><div className="modal-sure" onClick={sureClick}>確定</div></div></div>);
}export default ModalInput;

index.scss

.modal-input-box {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.4);z-index: 99;.modal-input-content {width: 560px;padding: 24px 24px 58px 24px;border-radius: 12px;background: #FFF;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);box-sizing: border-box;.modal-title {color: #1E201F;font-size: 16px;line-height: 24px;letter-spacing: -0.01px;font-weight: bold;}.modal-delete {width: 24px;height: 24px;position: absolute;top: 24px;right: 24px;cursor: pointer;}.modal-line {width: 560px;height: 1px;background: #EFF2F9;position: absolute;top: 64px;left: 0;}.modal-content {width: 512px;padding: 32px 0;position: relative;.content-title {font-size: 14px;color: #505553;margin-left: 38px;padding-top: 8px;}.content-input {width: 360px;height: 34px;line-height: 34px;font-size: 14px;position: absolute;top: 32px;left: 114px;padding: 2px 10px 0px 10px;margin: 0;border-radius: 6px;border: 1px solid #E8ECEB;}input:focus {outline: 1px solid #00b498;border-radius: 4px;}input:hover {outline: 1px solid #00b498;border-radius: 4px;}input::placeholder {color: #A7AAA8;}}.modal-cacle {display: inline-block;padding: 6px 24px;border-radius: 6px;border: 1px solid #DCDFE6;font-size: 14px;position: absolute;bottom: 24px;right: 112px;cursor: pointer;&:hover {color: #00B498;border: 1px solid #00B498;}}.modal-sure {display: inline-block;padding: 6px 24px;border-radius: 6px;border: 1px solid #00B498;font-size: 14px;position: absolute;bottom: 24px;right: 24px;background-color: #00B498;color: #fff;cursor: pointer;&:hover {background: #1BCEB2;}}}
}

父組件引用時：

import ModalInput from "../.././components/modalInput";
import { useState } from "react";function Home() {// 系統名稱輸入彈窗是否顯示const [isShowModal, setIsShowModal] = useState(false)// 系統名稱const [systemName, setSystemName] = useState('');/*** 系統名稱輸入彈窗，子元素給父元素傳的，用戶輸入的內容* @param param 是否關閉彈窗* @param data 用戶輸入的內容*/function getValueFromSon(param: boolean, data: string) {setIsShowModal(param);if (data !== '') {setSystemName(data);// 傳給后端，并刷新獲取信息數據接口}}return (<div>{isShowModal ? <ModalInput isShow={isShowModal} systemNameData={systemName} sendValueToFather={getValueFromSon}></ModalInput> : ''}</div>);
}export default Home;

二、提示框Modal

在components文件夾下新建文件夾modalTip，modalTip文件夾下新建文件index.tsx和index.scss。

組件代碼：

index.tsx

import './index.scss';
// 替換成自己的提示圖標
import Delete from '../../assets/images/icon-delete.png'  //右上角關閉圖標
import Question from '../../assets/images/icon-question.png'//左上角彈窗類型，提問
import Error from '../../assets/images/icon-error.png'//左上角彈窗類型，錯誤function ModalInput(props: any) {// 提示彈窗類型，可以自行添加//error 錯誤//question 提問//none 沒有// 父元素傳過來的值let data = {type: props.type,// 彈窗類型，根據類型顯示圖標（錯誤/提問）title: props.title,// 標題content: props.content,//內容}/*** 取消*/function cancleClick() {props.sendValueToFather(false);}/*** 確定*/function sureClick() {props.sendValueToFather(true);}return (<div className='modal-input-box'><div className="modal-input-content"><div className="left-title">{data.type === "question" ? <img className="modal-tip" src={Question} alt="提示標志" /> : " "}{data.type === "error" ? <img className="modal-tip" src={Error} alt="提示標志" /> : " "}<div className="modal-title">{data.title}</div></div><img className="modal-delete" src={Delete} alt="關閉" onClick={cancleClick} /><div className="modal-content"><div className="content-text">{data.content}</div></div><div className="modal-cacle" onClick={cancleClick}>取消</div><div className="modal-sure" onClick={sureClick}>確定</div></div></div>);
}export default ModalInput;

index.scss

.modal-input-box {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.4);z-index: 99;.modal-input-content {width: 400px;padding: 24px 24px 58px 24px;border-radius: 12px;background: #FFF;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);box-sizing: border-box;.left-title {height: 24px;line-height: 24px;.modal-tip {width: 24px;height: 24px;margin-right: 6px;float: left;}.modal-title {display: inline;color: #1E201F;font-size: 16px;letter-spacing: -0.01px;font-weight: bold;float: left;}}.modal-delete {width: 24px;height: 24px;position: absolute;top: 24px;right: 24px;cursor: pointer;}.modal-content {width: 512px;padding: 14px 0 24px 0;position: relative;.content-text {width: 348px;font-size: 14px;color: #666;padding-top: 8px;word-break: break-all;text-align: justify;text-justify: inter-word;line-height: 22px;}}.modal-cacle {display: inline-block;padding: 6px 24px;border-radius: 6px;border: 1px solid #DCDFE6;font-size: 14px;position: absolute;bottom: 24px;right: 112px;cursor: pointer;&:hover {color: #00B498;border: 1px solid #00B498;}}.modal-sure {display: inline-block;padding: 6px 24px;border-radius: 6px;border: 1px solid #00B498;font-size: 14px;position: absolute;bottom: 24px;right: 24px;background-color: #00B498;color: #fff;cursor: pointer;&:hover {background: #1BCEB2;}}}
}

組件調用：

import ModalTip from "../.././components/modalTip";
import { useState } from "react";function Home() {// 系統名稱輸入彈窗是否顯示const [isShowModal, setIsShowModal] = useState(false)/*** 子元素傳給父元素的結果* @param param 取消/確定*/function getValueFromSon(param: boolean) {setIsShowModal(false);if (param) {//用戶點擊確定}else{//用戶點擊取消}}return (<div>{isShowModal ? <ModalTip type={'question'} title={"確定刪除嗎？"} content={"刪除后不可恢復哦~"} sendValueToFather={getValueFromSon}></ModalTip> : ''}</div>);
}export default Home;

三、搜索欄Search

? ? ? ??

在components文件夾下新建文件夾search，search文件夾下新建文件index.tsx和index.scss。

組件代碼：

index.tsx

import './index.scss';
import { useState } from "react";
// 搜索圖標,記得添加
import SearchIcon from "../../assets/images/icon-search.png";function Search(props: any) {const [inputValueData, setInputValue] = useState("")/*** 獲得輸入框輸入的文字* @param event input輸入事件*/function inputValue(event: any) {setInputValue(event.target.value)}/*** 用戶點擊了鍵盤回車按鈕* @param e 元素信息*/function search(e: any) {if (e.keyCode === 13) {toFather()// 用戶按下回車后，讓input元素失去焦點var inputElement: any = document.getElementById('myInput');inputElement.blur();}}/*** 將用戶輸入的內容傳給父元素*/function toFather() {props.searchValue(inputValueData)}return (<div><input id="myInput" className="edu-Manage-input" type="text" placeholder={props.placeholder} onChange={inputValue} value={inputValueData} onKeyUp={search} /><img className="edu-Manage-search" src={SearchIcon} alt="搜索" onClick={toFather} /></div>);
}export default Search;

index.scss

.edu-Manage-input {width: 240px;height: 34px;line-height: 34px;font-size: 14px;padding: 2px 0px 0px 34px;margin: 0;border-radius: 6px;border: 1px solid #E8ECEB;cursor: pointer;
}.edu-Manage-search {width: 14px;height: 14px;position: absolute;left: 28px;top: 28px;cursor: pointer;z-index: 99;&:hover {input {outline: 1px solid #00b498;border-radius: 4px;}}
}input:focus {outline: 1px solid #00b498;border-radius: 4px;
}input:hover {outline: 1px solid #00b498;border-radius: 4px;
}input::placeholder {color: #A7AAA8;
}

組件調用：

import Search from "../.././components/search";function Home() {/*** 搜索組件返回用戶搜索的字符串* @param value 用戶搜索的字符串*/function getSearchData(value: string) {console.log(value)}return (<div><Search placeholder="請輸入姓名" searchValue={getSearchData}></Search></div>);
}export default Home;