在 React 中禁用按鈕
我們將介紹如何使用 button 元素的 disabled 屬性來禁用 react.js 中的按鈕。
我們還將介紹點選按鈕後禁用該按鈕的方法。
我們還將介紹在表單中使用禁用按鈕來阻止使用者在輸入欄位中輸入資料之前點選按鈕的方法。
在 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 的 state 禁用它。我們將在載入時將按鈕的 disable 狀態設定為 false，並在我們的按鈕元素中新增 onClick 函式，這會將按鈕的 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 並將按鈕的 state 更改為 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