在 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