React ボタン無効化 解説

React.jsでボタンを無効にする方法

React.jsでは、ボタンを無効にするためにdisabled属性を使用します。

基本的な使い方

import React, { useState } from 'react';

function MyComponent() {
  const [isDisabled, setIsDisabled] = useState(false);

  const handleClick = () => {
    setIsDisabled(true);
  };

  return (
    <button disabled={isDisabled} onClick={handleClick}>
      Click me!
    </button>
  );
}

この例では、isDisabledという状態変数を使い、ボタンがクリックされるとdisabledをtrueに設定することで無効にします。

具体的な使用場面

• ユーザーの操作を制限する
  特定の状況下でボタンを無効にする。
• APIリクエストの処理中
  リクエストが完了するまでボタンを無効にする。
• フォームの送信ボタン
  すべての入力フィールドが適切に入力されるまでボタンを無効にする。

重要なポイント

• disabled属性は、ボタンの外観を変更することもできます。ブラウザによって異なるスタイルが適用される場合があります。
• disabled属性は、ボタンのクリックイベントを無効にします。

条件付きレンダリング

ボタンの表示や無効化を条件に基づいて制御することもできます。

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return    (
    <button disabled={count >= 5} onClick={handleClick}>
      Click me {count} times
    </button>
  );
}

この例では、ボタンは5回クリックされると無効になります。

基本的な例

import React, { useState } from 'react';

function MyComponent() {
  const [isDisabled, setIsDisabled] = useState(false);

  const handleClick = () => {
    setIsDisabled(true);
  };

  return (
    <button disabled={isDisabled} onClick={handleClick}>
      Click me!
    </button>
  );
}

解説

• disabled属性をボタンに適用し、isDisabledの状態に応じてボタンを有効または無効にします。
• handleClick関数で、ボタンがクリックされたときにisDisabledをtrueに設定し、ボタンを無効にします。
• useStateフックを使って、ボタンの状態を管理するisDisabled変数を定義します。

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return    (
    <button disabled={count >= 5} onClick={handleClick}>
      Click me {count} times
    </button>
  );
}

• countが5以上になった場合、disabled属性を適用してボタンを無効にします。
• count変数を使い、ボタンがクリックされた回数を数えます。

フォーム送信の例

import React, { useState } from 'react';

function MyForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
  });

  const [isFormValid, setIsFormValid] = useState(false);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
    validateForm();
  };

  const handleSu   bmit = (event) => {
    event.preventDefault   ();
    // フォーム送信処理
  };

  const validateForm = () => {
    // フォームの入力値を検証する
    setIsFormValid(formData.name !== '' && formData.email !== '');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" value={formData.name} onChange={handleChange} />
      <input type="email" name="email" value={formData.email} onChange={handleChan   ge} />
      <button type="s   ubmit" disabled={!isFormValid}>
        Submit
      </button>
    </form>
  );
}

• disabled属性をSubmitボタンに適用し、フォームが有効な場合のみボタンを有効にします。
• handleSubmit関数で、フォームが送信されたときに送信処理を実行します。
• handleChange関数で、入力値が変更されたときにformDataを更新し、validateForm関数でフォームの有効性を検証します。
• フォームの入力値を管理するformData変数と、フォームの有効性を管理するisFormValid変数を定義します。

CSSを使用してボタンを無効にする

注意
この方法は、ボタンのクリックイベントを無効にせず、単にボタンの外観を変更します。

.disabled-button {
  opacity: 0.5;
  pointer-events: none;
}

import React, { useState } from 'react';

function MyComponent() {
  const [isDisabled, setIsDisabled] = useState(false);

  const handleClick = () => {
    setIsDisabled(true);
  };

  return (
    <button className={isDisabled ? 'disabled-button' : ''} onClick={handleClick}>
      Click me!
    </button>
  );
}

カスタムフックを使用する

import React, { useState } from 'react';

function useDisabledButton() {
  const [isDisabled, setIsDisabled] = useState(false);

  const handleDisable = () => {
    setIsDisabled(true);
  };

  const handleEnable = () => {
    setIsDisabled(false);
  };

  return [isDisabled, handleDisable, handleEnable];
}

function MyComponent() {
  const [isDisabled, handleDisable, handleEnable] = useDisabledButton();

  const handleClick = () => {
    handleDisable();
    // ボタンを無効にする処理
    handleEnable(); // ボタンを有効にする処理
  };

  return (
    <button disabled={isDisabled} onClick={handleClick}>
      Click me!
    </button>
  );
}

ライブラリを使用する

注意
ライブラリを使用する場合は、プロジェクトの要件と依存関係を考慮してください。

条件付きレンダリングとJSXのフラグメント

import React, { useState } from 'react';

function MyComponent() {
  const [isDisabled, setIsDisabled] = useState(false);

  const handleClick = () => {
    setIsDisabled(true);
  };

  return (
    <>
      {isDisabled ? (
        <button disabled>Click me (disabled)</button>
      ) : (
        <button onClick={handleClick}>Click me</button>
      )}
    </>
  );
}