所有课程

软件开发

数据科学与商业分析AI 与机器学习项目管理网络安全云计算DevOps业务与领导力质量管理软件开发敏捷与ScrumIT 服务与架构数字营销大数据职业快速通道企业其他部分

首页资源软件开发学习如何创建和使用ReactJS按钮

现在的趋势

[

Tensorflow Docker

文章

](www.simplilearn.com/tutorials/d…

树莓派Docker

文章

](www.simplilearn.com/tutorials/d…

区块链职业指南。成为一名区块链开发者的综合游戏手册

电子书

](www.simplilearn.com/blockchain-…

淘宝网上卖的是什么？

文章

](www.simplilearn.com/tutorials/m…

PHP中的数组

文章

](www.simplilearn.com/tutorials/p…

了解C#数组的一站式解决方案

视频教程

](www.simplilearn.com/tutorials/a…

2022年需要学习的最佳编程语言

文章

](www.simplilearn.com/best-progra…

AngularJS Vs. Angular 2 Vs. Angular 4：了解它们的区别

文章

](www.simplilearn.com/angularjs-v…

淘宝网上卖的是什么？

文章

](www.simplilearn.com/tutorials/r…

掌握了这些知识，你就会知道什么是真正的编程了。

文章

](www.simplilearn.com/tutorials/p…)

学习创建和使用ReactJS按钮

作者：Simplilearn最后更新于2022年1月29日

ReactJS Button

安装React Bootstrap

安装以下软件包，以便在你的项目中使用React Bootstrap按钮。

npm install react-bootstrap bootstrap@5.1.3

你可以通过以下方式导入特定的组件。

import Button from 'react-bootstrap/Button';

或者。

import { Button } from 'react-bootstrap';

你可以通过以下方式添加css。

import 'bootstrap/dist/css/bootstrap.min.css'。

让我们看一下按钮样式类型的一些代码。

React中的首要按钮{' '}。

React中的二级按钮{' '}

React中的Success Button{' '}

React中的警告按钮{' '}

Danger Button in React Info Button in React{' '}

React中的Light Button React中的Dark Button{' '}。

React中的链接按钮。

</>

大纲按钮

轮廓按钮是具有较轻触感的按钮，没有背景颜色。对于这些类型的按钮，在变量属性中，在按钮类型之前，我们添加一个额外的 "outline-"。

让我们看看代码的解释。

Primary Outline Button in React{' '}。

React中的次要轮廓按钮{' '}。

React中的Success概要按钮{' '}。

React中的Warning概要按钮{' '}。

Danger Outline Button in React{' '}

React中的信息概要按钮{' '}。

React中的Light Outline Button{' '}。

Dark Outline Button in React。

</>

按钮标签

一般来说，HTML按钮元素是由React中的组件呈现的。它可以被渲染成你想要的样子，比如React中的Button组件可以被渲染成标签，如果href被作为道具传递给Button组件。

无论你想呈现什么，都可以通过使用

元素中的作为道具来呈现。

React Bootstrap会照顾到ARIA的适当规则。

让我们通过一个代码例子。

Link Button{' '}

{' '}

</>

免费的ReactJS初学课程

掌握ReactJSS的基础知识开始学习

Free ReactJS for Beginners Course

尺寸

如果你想在你的React应用程序中使用花哨的按钮，如大的或小的按钮，那么你可以通过使用尺寸道具如 "size=sm "或 "size=lg "等来实现这种尺寸的变化。

让我们看看这段代码。

React中的大按钮尺寸

{' '}

在React中大尺寸的按钮

在React中，小按钮的大小

{' '}

在React中的小按钮的大小

</>

块状按钮

如果你需要像 "bootstrap 4 "的块状按钮那样的全宽或响应式堆栈的按钮，你可以在Reactjs中通过混合显示和间隙线来创建它。

让我们来看看这个代码的实现。

<按钮 variant="primary" size="lg">

主块按钮

二级块级按钮

二级区块级按钮

活动状态

如果你需要一个按钮的状态是活动状态，那么你只需要将按钮的组件设置为活动道具。

让我们看看这个代码的实现。

。

主动按钮

{' '}

二级活动按钮

</>

失衡状态

就像活动按钮一样，你也可以制作禁用的按钮，并通过添加禁用道具到按钮组件中。

让我们看看代码的实现。

初级禁用的按钮

{' '}

二级禁用按钮

{' '}

次级禁用按钮

二级禁用的链接按钮

</>

新课程。初级全栈开发

学习Git命令、Angular、NodeJS、Maven及更多内容立即报名

New Course: Full Stack Development for Beginners

按钮加载状态

当从一个按钮激活一个异步操作时，给用户反馈一个加载状态，这可能是一个非常好的用户体验模式。这可以通过更新我们的Button's props的状态变化来轻松实现。

让我们来看看这个代码的实现。

函数 simulateNetworkRequest() {

return new Promise((resolve) => setTimeout(resolve, 2000))。

}

功能 LoadingButton() {

const [isLoading, setLoading] = useState(false);

useEffect(() => {

如果(isLoading) {

simulateNetworkRequest().then(() => {

setLoading(false);

});

}

}, [isLoading])。

const handleClick = () => setLoading(true);

返回 (

<Button

variant="primary"

disabled={isLoading}

onClick={!isLoading ? handleClick : null}。

{isLoading ?'正在加载...' : '点击加载'}

);

}

render()。

ReactJS中的复选框/单选按钮

在ReactJS中，你也可以使用按钮来设计复选框和单选框元素。当你想要一个在HTML表单中整齐工作的切换按钮时，这可能很有用。

让我们看看这个代码的实现。

函数 ToggleButtonExample() {

const [checked, setChecked] = useState(false);

const [radioValue, setRadioValue] = useState('1');

const radios = [

{ name: 'Active', value: '1' },

{ name: 'Radio', value: '2' },

{ name: 'Radio', value: '3' },

];

返回 (

<ToggleButton

id="toggle-check"

type="checkbox"

variant="secondary"

checked={checked}

value="1"

onChange={(e) => setChecked(e.currentTarget.checked)}。

已检查

{radios.map((radio, idx) => (

<ToggleButton

key={idx}

id={`radio-${idx}`}

类型="广播"

variant="secondary"

name="广播"

value={radio.value}

checked={radioValue === radio.value}

onChange={(e) => setRadioValue(e.currentTarget.value)}。

{radio.name}

))}

<ToggleButton

className="mb-2"

id="toggle-check"

type="checkbox"

variant="outline-primary"

checked={checked}

value="1"

onChange={(e) => setChecked(e.currentTarget.checked) }

已检查

{radios.map((radio, idx) => (

<ToggleButton

key={idx}

id={`radio-${idx}`}

类型="广播"

variant={idx % 2 ? 'outline-success' : 'outline-danger'}

name="广播"

value={radio.value}

checked={radioValue === radio.value}

onChange={(e) => setRadioValue(e.currentTarget.value)}。

{radio.name}

))}

</>

);

}

render()。

全栈网络开发课程

成为MEAN Stack的专家查看课程

Full Stack Web Developer Course

不受控制的

这里，我们将在React中实现不受控制的按钮。

在这些按钮中，三个按钮将是复选框按钮，其中两个是预选的。而我们将制作三个单选按钮，其中单选1按钮将被预选。

对于不受控制的，代码将以如下方式实现。

复选框1（已预选）

选框 2

复选框2

勾选框3（预选）。

复选框3（已预选）

单选1（已预选）

单选2

无线电2

电台 3

电台3

</>

受控的

对于受控按钮，代码实现将如下所示。

功能 ToggleButtonGroupControlled() {

const [value, setValue] = useState([1, 3]);

const handleChange = (val) => setValue(val);

返回 (

。

选项1

选项2

选项3

</ToggleButton

);

}

render()。

通过全栈网络开发--MEAN堆栈硕士课程，推进你作为MEAN堆栈开发者的职业生涯。现在就报名参加!

结语

到目前为止，我们都已经了解了React按钮以及如何根据我们的需要以不同的方式使用它们。

正如你所知，除了拥有数据结构和算法方面的专业知识外，你的开发技能对于在技术行业中取得成就同样至关重要。因此，一个技术专家应该始终保持自己在网络开发领域的最新技术和发展。

Simplilearn提供了一些优秀的全栈网络开发证书课程，你可以去看看。这些课程旨在帮助你掌握前端和后端的不同技术和工具，如AngularMVC和SpringBoot。

如果你正在寻找短期课程来提升你的技能，Simplilearn也提供免费的在线技能提升课程，如数据科学、商业分析、软件开发、人工智能和机器学习等领域。

寻找我们在顶级城市的全栈网络开发在线训练营的研究生课程。

名称	日期	地点
全栈式网络开发的研究生课程	班级于2022年2月9日开始，
周末批次	您所在的城市	查看详情
全栈式网络开发研究生课程	课程于2022年2月23日开始，
周末批次	芝加哥	查看详情
全栈式网络开发研究生课程	班级于2022年3月8日开始，
周末批次	休斯顿	查看详情