React のボタンを無効にする

Rana Hasnain Khan 2023年1月30日
  1. React のボタンを無効にする
  2. React でボタンクリック後にボタンを無効にする
  3. 入力フィールドが空の場合はボタンを無効にし、ユーザーが入力フィールドに入力した場合は有効にする
React のボタンを無効にする

button 要素に無効化された prop を使用して、react.js でボタンを無効化する方法を紹介します。

また、ボタンをクリックした後にボタンを無効にする方法も紹介します。

また、フォームで disable the button を使用して、ユーザーが入力フィールドにデータを入力する前にボタンをクリックするのを防ぐ方法も紹介します。

React のボタンを無効にする

ボタンを単純に無効にするには、ボタン要素で disabled prop を使用し、その値を true に設定します。これは、react のボタンを無効にする最も簡単な方法です。

サンプルコード:

# react.js
import React from "react";
function Disable(){
return <button disabled={true}>I am Disabled!</button>
}
export default Disable

出力:

React のボタンを無効にする

上記の出力プレビューで、ボタンが無効になっていることがわかります。

React でボタンクリック後にボタンを無効にする

ボタンをクリックした後に無効にしたい場合は、react の状態を使用して無効にすることができます。ロード時にボタンの disable 状態を false に設定し、ボタン要素に onClick 関数を追加します。これにより、ボタンの disable 状態が true に設定されます。したがって、ユーザーがボタンをクリックすると、ボタンの disable 状態が true に変更されます。

サンプルコード:

# react.js
import React from "react";
function DisableAfterClick() {
  const [disable, setDisable] = React.useState(false);

  return (
    <button disabled={disable} onClick={() => setDisable(true)}>
      Click to Disable!
    </button>
  );
}
export default DisableAfterClick

出力:

ボタンをクリックして React した後、ボタンを無効にする

上記の出力プレビューで、ボタンが無効になっていることがわかります。ただし、ボタンを無効にした後、ボタンを有効にする方法はありません。

入力フィールドが空の場合はボタンを無効にし、ユーザーが入力フィールドに入力した場合は有効にする

ユーザーが入力フィールドにテキストを入力したときに無効化されたボタンを有効にし、ユーザーが入力フィールドをクリアしたときにそれを無効にしたい場合は、無効化機能を使用できます。したがって、ユーザーが入力フィールドに何かを入力すると、disabled 関数は!text から false 値を取得し、ボタンの statedisabled から enabled に変更します。また、ユーザーが入力フィールドをクリアすると、!texttrue を返し、ボタンの状態disabled に変更します。

サンプルコード:

import React, { useState } from "react";

function EnableOnInputChange() {
  const [text, enableButton] = useState("");

  const handleTextChange = (event) => {
    enableButton(event.target.value);
  };


  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Your state values: \n 
            text: ${text} \n 
            You can replace this alert with your process`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Enter Text</label>
        <input
          type="text"
          name="text"
          placeholder="Enter Text"
          onChange={handleTextChange}
          value={text}
        />
      </div>
      
      <button type="submit" disabled={!text}>
        Enable
      </button>
    </form>
  );
}

export default EnableOnInputChange

出力:

入力フィールドが空の場合はボタンを無効にし、ユーザーが react の入力フィールドに入力すると有効にする

上の出力を見ると、入力フィールドに入力するとボタンが有効になり、クリアすると入力フィールドのボタンが再び無効になることがわかります。

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

関連記事 - React Button