Reactでボタンの有効・無効（disabled属性）を切り替えたい…。以下のように記述すると可能のようです。

<button disabled={true or false}>ボタン</button>

disabled=trueでボタン無効化、disabled=falseでボタン有効化…となります。これをReactのスクリプト側で制御する場合は単純にuseStateを使うのが一般的かと思います。

条件によってdisabledを変更する

例：画像更新ボタン押下後、画像描写が完了するまでボタンを無効化にする

猫の画像をランダムに出すTheCatAPIとfetchを使い、読み込みが完了するまで更新ボタンを無効化にするみたいな実装。これでボタン連打を禁止にさせ、APIへの過剰アクセスを防止させてみました。エラー対策など細かい処理は省略してますが大雑把にするとこんな感じになると思います。

import { useEffect, useState } from 'react';
export default function APP() {
 const [data, setData] = useState(null);
 const [disable, setDisable] = useState(true); //useStateでdisableを制御
 const getCAT = async () => {
 const res = await fetch(`https://api.thecatapi.com/v1/images/search`).then((res) => res.json());
  setData(res[0].url);
 }
 useEffect(() => {
  getCAT();
 }, [])
 const onClick = async () => {
  setDisable(true); //ボタン押下でボタンをdisableにする
  await getCAT();
 }
 const onLoad = () => {
  setDisable(false); //読み込み完了でボタンをenableをにする
 }
 if(data){
  return (
   <div>
   <p><img src={data} alt="" onLoad={onLoad} /></p>
   <button onClick={onClick} disabled={disable}>更新するにゃん</button>
   </div>
  );
 }else{
  return (<p>Loading</p>);
 }
}

動きのイメージ。CSSでbutton[disabled]のセレクタでボタンの色とカーソルを意図的に変えています。

• Reactでボタンの有効・無効（disabled属性）のサンプル

ねこかわいいよねこ

おしまい♥

タグ：React