Reactでコンポーネントの活性・非活性を切り替える方法

Reactアプリケーション開発では、ユーザーの操作に応じてコンポーネントを活性（有効）または非活性（無効）にすることがよくあります。
本記事では、具体的なコード例を交えながら、この機能を実現する方法を紹介します。

活性・非活性の基本的な考え方

Reactでは、コンポーネントのプロパティ（props）を使って状態を管理します。
「disabled」プロパティを設定することで、簡単に活性・非活性を切り替えることが可能です。

以下の例では、フォーム入力コンポーネントを活性または非活性にする方法を示します。

基本例：ボタンの活性・非活性を切り替える

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の例です。
指定した日付が過去であれば無効にします。

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を使用した日付比較による動的な非活性化は、実用的で多くのプロジェクトで役立つでしょう。

• Original:https://minory.org/react-component-enable-disable.html
• Source:minory
• Author:管理者

Amazonベストセラー