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 の状態を使用して無効にすることができます。ロード時にボタンの 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
出力：
上記の出力プレビューで、ボタンが無効になっていることがわかります。ただし、ボタンを無効にした後、ボタンを有効にする方法はありません。
入力フィールドが空の場合はボタンを無効にし、ユーザーが入力フィールドに入力した場合は有効にする
ユーザーが入力フィールドにテキストを入力したときに無効化されたボタンを有効にし、ユーザーが入力フィールドをクリアしたときにそれを無効にしたい場合は、無効化機能を使用できます。したがって、ユーザーが入力フィールドに何かを入力すると、disabled 関数は!text から false 値を取得し、ボタンの state を disabled から enabled に変更します。また、ユーザーが入力フィールドをクリアすると、!text は true を返し、ボタンの状態を 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
出力：
上の出力を見ると、入力フィールドに入力するとボタンが有効になり、クリアすると入力フィールドのボタンが再び無効になることがわかります。
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