useState Hookを使って、ReactJSで入力欄が空のときボタンを無効にする方法

2024-04-02

ReactJSで入力欄が空のときボタンを無効にする方法

useState Hookを使う方法

この方法は、useState Hookを使って入力欄の状態を管理し、その状態に基づいてボタンの有効無効を切り替えます。

コード例

import React, { useState } from 'react';

function App() {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
      />
      <button disabled={!inputValue}>送信</button>
    </div>
  );
};

export default App;

解説

useState Hookを使って、inputValueという状態変数を初期値''で初期化しています。
handleInputChange関数では、入力欄の値が変更されたときに呼び出され、inputValue状態変数を更新します。
button要素のdisabled属性には、!inputValueという式を指定しています。これは、inputValueが空のときはtrueになり、ボタンが無効になることを意味します。

refを使う方法

この方法は、refを使って入力欄のDOM要素を取得し、その要素のvalueプロパティをチェックすることで、ボタンの有効無効を切り替えます。

import React, { useRef } from 'react';

function App() {
  const inputRef = useRef();

  const handleButtonClick = () => {
    if (inputRef.current.value === '') {
      return;
    }
    // ボタンが押されたときの処理
  };

  return (
    <div>
      <input
        type="text"
        ref={inputRef}
      />
      <button onClick={handleButtonClick}>送信</button>
    </div>
  );
};

export default App;

button要素のonClick属性には、handleButtonClick関数を指定しています。
handleButtonClick関数では、inputRef.current.valueプロパティをチェックして、空のときは処理を中止します。

どちらの方法でも同じ結果が得られますが、どちらを使うべきかは状況によって異なります。

入力欄の状態を他のコンポーネントでも使用したい場合は、useState Hookを使う方が良いでしょう。
入力欄の状態を他のコンポーネントで使用しない場合は、refを使う方がシンプルで済みます。

ReactJSで入力欄が空のときボタンを無効にする方法はいくつかあります。状況に合わせて適切な方法を選びましょう。

import React, { useState } from 'react';

function App() {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
      />
      <button disabled={!inputValue}>送信</button>
    </div>
  );
};

export default App;

実行方法

上記のコードをファイルに保存します。
ファイルをindex.jsという名前で保存します。
以下のコマンドを実行して、プロジェクトを作成します。

npm init -y

npm install react react-dom

npm start

ブラウザでhttp://localhost:3000を開きます。

入力欄が空のときボタンが無効になっていることを確認

入力欄に何も入力せずに、送信ボタンをクリックします。
ボタンが無効になっていることを確認します。

入力欄に値を入力して、ボタンが有効になることを確認

入力欄に値を入力します。
送信ボタンをクリックします。

入力欄が空のときボタンを無効にするその他の方法

useEffect Hookを使う方法

import React, { useState, useEffect } from 'react';

function App() {
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    const button = document.querySelector('button');
    button.disabled = !inputValue;
  }, [inputValue]);

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(event) => setInputValue(event.target.value)}
      />
      <button>送信</button>
    </div>
  );
};

export default App;

useEffect Hookを使って、inputValue状態変数が変化したときにbutton要素のdisabled属性を設定しています。

カスタムフックを使う方法

入力欄の値を検証してボタンの有効無効を切り替える処理をカスタムフックにまとめることで、コードをよりシンプルにすることができます。

import React, { useState } from 'react';

function useInputValidation() {
  const [inputValue, setInputValue] = useState('');

  const isInputValid = () => {
    return inputValue !== '';
  };

  return {
    inputValue,
    setInputValue,
    isInputValid,
  };
}

function App() {
  const { inputValue, setInputValue, isInputValid } = useInputValidation();

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(event) => setInputValue(event.target.value)}
      />
      <button disabled={!isInputValid}>送信</button>
    </div>
  );
};

export default App;

useInputValidationというカスタムフックを作成して、入力欄の値を検証してボタンの有効無効を切り替える処理をまとめました。
Appコンポーネントでは、useInputValidationフックを使って、inputValue、setInputValue、isInputValidという3つの値を取得しています。

reactjs