Reactアプリケーション開発では、ユーザーの操作に応じてコンポーネントを活性（有効）または非活性（無効）にすることがよくあります。
本記事では、具体的なコード例を交えながら、この機能を実現する方法を紹介します。
目次
活性・非活性の基本的な考え方
Reactでは、コンポーネントのプロパティ（props）を使って状態を管理します。
「disabled」プロパティを設定することで、簡単に活性・非活性を切り替えることが可能です。
以下の例では、フォーム入力コンポーネントを活性または非活性にする方法を示します。
基本例：ボタンの活性・非活性を切り替える
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import React, { useState } from 'react'; import Button from '@mui/material/Button'; const ToggleButton = () => { const [isActive, setIsActive] = useState(false); return ( <div> <Button variant="contained" disabled={!isActive} onClick={() => alert('Button clicked!')} > {isActive ? '有効' : '無効'} </Button> <Button variant="outlined" onClick={() => setIsActive(!isActive)} > 状態を切り替える </Button> </div> ); }; export default ToggleButton; |
Luxonで日付に基づいてコンポーネントを非活性にする
より実践的な例として、Luxonライブラリを使用して、現在の日付と特定の日付を比較し、コンポーネントを活性または非活性にする方法を解説します。
以下は、DateTimePickerの例です。
指定した日付が過去であれば無効にします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import React from "react"; import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker'; import ja from 'date-fns/locale/ja'; import TextField from "@mui/material/TextField"; import Box from "@mui/material/Box"; import { DateTime } from "luxon"; const SimpleDateTimePicker = ({ date, setDate, label, minDate, maxDate }) => { const now = DateTime.fromISO("2024-06-27T00:05:00"); // 現在時刻の設定 const isDisabled = date ? DateTime.fromJSDate(date) < now : false; return ( <Box sx={{ mt: 2, mb: 2 }}> <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={ja}> <DateTimePicker label={label} value={date} inputFormat={"yyyy/MM/dd HH:mm:ss"} onChange={(newValue) => setDate(newValue)} renderInput={(params) => <TextField {...params} fullWidth />} disabled={isDisabled} minDate={minDate} maxDate={maxDate} /> </LocalizationProvider> </Box> ); }; export default SimpleDateTimePicker; |
まとめ
この記事では、Reactでコンポーネントを活性・非活性にする方法を紹介しました。
特に、Luxonを使用した日付比較による動的な非活性化は、実用的で多くのプロジェクトで役立つでしょう。
コメント