极客教程如何在ReactJS中禁用按钮
在这篇文章中，我们将学习如何在React.js中禁用按钮。禁用按钮意味着使其无法点击，并在视觉上指示其不可用。这是通过将按钮的disabled属性设置为true来实现的。它用于受控交互，例如使用有效数据进行表单提交。
当按钮被禁用时，它变为不可点击，并向用户显示其功能当前不可用的信息。这种常见做法有助于防止用户在特定上下文中执行无效或禁止的操作。
语法：
<button disabled={true}>Disabled Button</button>
先决条件
- React入门
- React Hooks
- NPM 或 NPX
创建React应用的步骤
步骤1：使用以下命令创建一个React应用
npx create-react-app disable-button-app
步骤 2：在创建项目文件夹disable-button-app后，使用以下命令导航到该文件夹：
cd disable-button-app
项目结构
方法1：使用弹框消息来管理状态
这种方法使用React的state hooks来管理按钮的禁用状态。创建了两个函数来切换禁用状态，并伴随着弹框消息来提供用户提示。按钮的外观通过条件性内部样式来确定。内部CSS定义了一个居中布局，具有突出的绿色标题和禁用状态（灰色，无光标）和启用状态（红色，光标指针）的不同样式。
示例： 在这个示例中，我们创建了一个组件，显示两个按钮，“禁用”和“启用”。点击“禁用”会禁用“禁用”按钮，反之亦然。弹框消息确认操作。
import React, { useState } from 'react';
function App() {
const [isButtonDisabled, setButtonDisabled] = useState(false);
const disableButton = () => {
setButtonDisabled(true);
alert("Button has been disabled!");
};
const enableButton = () => {
setButtonDisabled(false);
alert("Button has been enabled!");
};
return (
<div style={styles.container}>
<h1 style={styles.heading}>Geekforgeeks</h1>
<button
onClick={disableButton}
style={isButtonDisabled ?
styles.disabledButton : styles.enabledButton}
disabled={isButtonDisabled}
>
Disable
</button>
<button
onClick={enableButton}
style={!isButtonDisabled ?
styles.disabledButton : styles.enabledButton}
disabled={!isButtonDisabled}
>
Enable
</button>
</div>
);
}
export default App;
const styles = {
container: {
textAlign: 'center',
margin: 'auto',
padding: '20px',
width: 400,
},
heading: {
fontSize: '34px',
marginBottom: '10px',
color: "green",
borderBottom: "3px solid green",
paddingBottom: 20,
borderRadius: "8px",
},
disabledButton: {
backgroundColor: 'gray',
color: 'white',
cursor: 'not-allowed',
margin: 10,
padding: 15,
borderRadius: "8px",
border: "none",
boxShadow: "0px 0px 10px 0px grey",
},
enabledButton: {
backgroundColor: 'red',
color: 'white',
cursor: 'pointer',
margin: 10,
padding: 15,
borderRadius: "8px",
border: "none",
boxShadow: "0px 0px 10px 0px grey",
},
};
步骤3： 要打开该应用程序，请使用终端并输入以下命令。
npm start
输出 :
方法2：条件渲染
在React中进行条件渲染是基于条件来渲染组件，可以动态启用或禁用UI元素。有助于管理组件的可见性和交互。
示例： 在这个示例中，我们创建了一个带有输入框和提交按钮的表单界面。当输入框为空时，按钮初始状态为禁用。一旦用户输入文本，按钮就会变为启用状态，允许他们提交。点击按钮会触发一个弹窗，显示输入的值。
import React, { useState } from 'react';
function App() {
const [inputValue, setInputValue] = useState('');
const handleSubmit = () => {
if (inputValue.length > 0) {
alert("Form submitted with value: " + inputValue);
}
};
return (
<div style={styles.container}>
<h1 style={styles.heading}>Geekforgeeks</h1>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
style={styles.input}
/>
<button
onClick={handleSubmit}
style={inputValue.length === 0
? styles.disabledButton : styles.enabledButton}
disabled={inputValue.length === 0}
>
Submit
</button>
</div>
);
}
export default App;
const styles = {
container: {
textAlign: 'center',
margin: 'auto',
padding: '20px',
},
heading: {
fontSize: '34px',
marginBottom: '10px',
color: "green",
borderBottom: "3px solid green",
paddingBottom: 20,
borderRadius: "8px",
},
input: {
padding: '10px',
marginBottom: '10px',
width: '200px',
borderRadius: 8,
},
disabledButton: {
backgroundColor: 'gray',
color: 'white',
cursor: 'not-allowed',
margin: 10,
padding: 15,
borderRadius: "8px",
border: "none",
boxShadow: "0px 0px 10px 0px grey",
},
enabledButton: {
backgroundColor: 'green',
color: 'white',
cursor: 'pointer',
margin: 10,
padding: 15,
borderRadius: "8px",
border: "none",
boxShadow: "0px 0px 10px 0px grey",
},
};
要打开应用程序，请使用终端并输入下面列出的命令。
npm start
输出 ：
