こんにちは!
最近Reactでアプリ開発をする際にモーダルを作成したので、その方法をまとめておきたいと思います。
ページ遷移しなくても操作が行えるので、ストレスのないUIを作ることができますね
![](https://app-gram-kei.com/wp-content/uploads/2022/09/スクリーンショット-2022-09-24-9.49.55-1024x788.png)
親(ページ)コンポーネント
import './App.css';
import { useState } from 'react';
import Modal from './Modal';
function Parent() {
// モーダルの開閉状態を親コンポーネントのstateで管理
const [isModalOpen, setIsModalOpen] = useState(false);
return (
<div className="App">
<button onClick={() => setIsModalOpen(true)}>モーダルを開く</button>
<Modal isOpened={isModalOpen} onClose={() => setIsModalOpen(false)} />
</div>
);
}
export default Parent;
子(モーダル)コンポーネント
const Modal = (props) => {
if (!props.isOpened) {
return null;
}
return (
<div
className="flex justify-center items-center overflow-auto fixed inset-0 m-auto bg-black1 bg-opacity-20 backdrop-blur-md z-20"
onClick={props.onClose}
>
<div
className="bg-white h-80 w-[32rem] rounded-2xl shadow-2xl"
// コンポーネントの外側をクリックしたときにモーダルを閉じることができるように
onClick={(e) => e.stopPropagation()}
>
<h2 className="mt-10 ml-12 text-xl">タスクの追加</h2>
<form action="">
<textarea className="block mx-auto my-7 border-[1px] border-black3 rounded-2xl w-4/5 h-40 resize-none"></textarea>
<div className="text-right bg-black3 mt-5 w-full rounded-b-2xl py-5">
<button
className="mr-5 bg-black3 w-32 py-1 text-black2"
onClick={props.onClose}
>
キャンセル
</button>
<button className="bg-blue1 w-40 mr-5 py-1 rounded-xl text-white">
作成
</button>
</div>
</form>
</div>
</div>
);
};
export default CreateTaskModal;
スタイリングに関してはtailwind CSSを使っています。classNameでスタイリングしていますので、普通のCSSを使う際は消すようにしてください。