React 中的按钮

17 Mar 2025 | 6 分钟阅读

按钮允许用户通过单击来执行操作和做出选择。

它们（按钮）传达用户可以执行的操作。它放置在 UI 中的如下位置：

模态窗口
形式
卡片
工具栏 (Toolbars)
基本按钮

按钮有 3 种变体：文本（默认）、包含和轮廓。

import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
export default function BasicButtons() {
  return (
    <Stack spacing={2} direction="row">
   <Button variant="text">Text</Button>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
    </Stack>
  );
}

文本按钮

文本按钮用于不太明显的动作，包括卡片对话框中的那些。在卡片中，文本按钮将帮助我们保持对卡片内容的强调。

import * as React from 'react';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
export default function TextButtons() {
  return (
    <Stack direction="row" spacing={2}>
      <Button>Primary</Button>
      <Button disabled>Disabled</Button>
      <Button href="#text-buttons">Link</Button>
    </Stack>
  );
}

包含按钮

包含按钮是高强调的，其特征在于使用海拔和填充。它包含在我们的应用程序中主要使用的操作。

import * as React from 'react';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
export default function ContainedButtons() {
  return (
    <Stack direction="row" spacing={2}>
      <Button variant="contained">Contained</Button>
      <Button variant="contained" disabled>
        Disabled
      </Button>
      <Button variant="contained" href="#contained-buttons">
        Link
      </Button>
    </Stack>
  );
}

您可以使用禁用海拔道具删除海拔。

import * as React from 'react';
import Button from '@mui/material/Button';
export default function DisableElevation() {
  return (
    <Button variant="contained" disableElevation>
      Disable elevation
    </Button>
  );
}

轮廓按钮

轮廓按钮是中等强调按钮。它们包含必要的动作，但不是应用程序中的主要动作。

轮廓按钮是包含按钮的较低替代方案，或文本按钮的较高强调替代方案。

import * as React from 'react';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
export default function OutlinedButtons() {
  return (
    <Stack direction="row" spacing={2}>
      <Button variant="outlined">Primary</Button>
      <Button variant="outlined" disabled>
        Disabled
      </Button>
      <Button variant="outlined" href="#outlined-buttons">
        Link
      </Button>
    </Stack>
  );
}

处理点击

所有组件都接受应用于根 DOM 元素的 onClick 处理程序。

<Button
  onClick={() => {
    alert('clicked');
  }}
>
  Click me
</Button>

注意：文档避免在组件的 API 部分提及本机道具。

颜色

import * as React from 'react';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
export default function ColorButtons() {
  return (
    <Stack direction="row" spacing={2}>
      <Button color="secondary">Secondary</Button>
      <Button variant="contained" color="success">
        Success
      </Button>
      <Button variant="outlined" color="error">
        Error
      </Button>
    </Stack>
  );
}

此外，通过使用默认按钮颜色，您可以添加自定义颜色或禁用任何您不需要的颜色。

大小

使用此属性可用于更大或更小的按钮。

上传按钮

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import PhotoCamera from '@mui/icons-material/PhotoCamera';
import Stack from '@mui/material/Stack';

const Input = styled('input')({
  display: 'none',
});
export default function UploadButtons() {
  return (
    <Stack direction="row" alignItems="center" spacing={2}>
      <label htmlFor="contained-button-file">
        <Input accept="image/*" id="contained-button-file" multiple type="file" />
        <Button variant="contained" component="span">
          Upload
        </Button>
      </label>
      <label htmlFor="icon-button-file">
        <Input accept="image/*" id="icon-button-file" type="file" />
        <IconButton color="primary" aria-label="upload picture" component="span">
          <PhotoCamera />
        </IconButton>
      </label>
    </Stack>
  );
}

带有标签和图标的按钮

有时您可能希望某些按钮具有图标，以增强应用程序的 UX，因为我们更容易识别徽标而不是纯文本。

例如，如果我们想要删除按钮，那么应该用垃圾箱图标标记它。

import * as React from 'react';
import Button from '@mui/material/Button';
import DeleteIcon from '@mui/icons-material/Delete';
import SendIcon from '@mui/icons-material/Send';
import Stack from '@mui/material/Stack';

export default function IconLabelButtons() {
  return (
    <Stack direction="row" spacing={2}>
      <Button variant="outlined" startIcon={<DeleteIcon />}>
        Delete
      </Button>
      <Button variant="contained" endIcon={<SendIcon />}>
        Send
      </Button>
    </Stack>
  );
}

图标按钮

图标按钮位于工具栏和应用程序栏中。图标适用于切换按钮，这些按钮允许选择或取消选择选项。例如，从标签添加或删除任何项目。

import * as React from 'react';
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import DeleteIcon from '@mui/icons-material/Delete';
import AlarmIcon from '@mui/icons-material/Alarm';
import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
export default function IconButtons() {
  return (
    <Stack direction="row" spacing={1}>
      <IconButton aria-label="delete">
        <DeleteIcon />
      </IconButton>
      <IconButton aria-label="delete" disabled color="primary">
        <DeleteIcon />
      </IconButton>
      <IconButton color="secondary" aria-label="add an alarm">
        <AlarmIcon />
      </IconButton>
      <IconButton color="primary" aria-label="add to shopping cart">
        <AddShoppingCartIcon />
      </IconButton>
    </Stack>
  );
}	

尺寸

使用 size 道具来在按钮中使用更大或更小的图标。

import * as React from 'react';
import Stack from '@mui/material/Stack';
import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';
export default function IconButtonSizes() {
  return (
    <Stack direction="row" alignItems="center" spacing={1}>
      <IconButton aria-label="delete" size="small">
        <DeleteIcon fontSize="inherit" />
      </IconButton>
      <IconButton aria-label="delete" size="small">
        <DeleteIcon fontSize="small" />
      </IconButton>
      <IconButton aria-label="delete" size="large">
        <DeleteIcon />
      </IconButton>
      <IconButton aria-label="delete" size="large">
        <DeleteIcon fontSize="inherit" />
      </IconButton>
    </Stack>
  );
}

颜色

使用 color 道具将主题颜色调色板应用于组件。

import * as React from 'react';
import Stack from '@mui/material/Stack';
import IconButton from '@mui/material/IconButton';
import Fingerprint from '@mui/icons-material/Fingerprint';

export default function IconButtonColors() {
  return (
    <Stack direction="row" spacing={1}>
      <IconButton aria-label="fingerprint" color="secondary">
        <Fingerprint />
      </IconButton>
      <IconButton aria-label="fingerprint" color="success">
        <Fingerprint />
      </IconButton>
    </Stack>
  );
}

定制

以下是自定义组件的示例。

加载按钮

加载按钮可以显示加载状态并禁用按钮的交互。

import * as React from 'react';
import LoadingButton from '@mui/lab/LoadingButton';
import SaveIcon from '@mui/icons-material/Save';
import Stack from '@mui/material/Stack';

export default function LoadingButtons() {
  return (
    <Stack direction="row" spacing={2}>
      <LoadingButton loading variant="outlined">
        Submit
      </LoadingButton>
      <LoadingButton loading loadingIndicator="Loading..." variant="outlined">
        Fetch data
      </LoadingButton>
      <LoadingButton
        loading
        loadingPosition="start"
        startIcon={<SaveIcon />}
        variant="outlined"
      >
        Save
      </LoadingButton>
    </Stack>
  );
}

切换加载按钮以查看不相关位置之间的过渡。

复杂按钮

图标按钮、文本按钮、包含按钮和浮动操作按钮构建到单个组件中，该组件称为 ButtonBase。

您可以采用较低级别的组件来创建自定义交互。

第三方路由库

在没有与服务器进行精确 HTTP 传输的情况下导航客户端是一种独特的用例。 ButtonBase 组件提供了组件属性来处理此用例。

边框

ButtonBase 在禁用的按钮上设置组件 pointer-events: none;，这会阻止禁用光标的出现。

如果您想使用"not allowed"，您有两个选项

仅 CSS：您可以删除 < Button> 元素的禁用状态下的 pointer-event 样式

.uibuttonbase-root:disabled {
  cursor: not allowed;
  pointer-events: auto;
,

虽然，

当您需要在禁用元素上显示工具提示时，您应该添加 pointer-events: none;。

如果您渲染的不是按钮元素，则光标不会改变。例如，链接 <a> 元素。

DOM 更改。您可以包装按钮

<span style={{ cursor: 'not allowed' }}>
  <button component={link} disabled>
    disabled
  </button>
</span>

它可以支持任何元素，例如链接 <a> 元素。

unstyled

该组件将附带未样式化的版本。它非常适合进行大量优化并减少捆绑包大小。

API

<button >
<buttonbase >
<iconbutton >
<loadingButton >

如何在 ReactJS 中使用按钮组件？

按钮允许用户通过一次点击来执行其操作并做出选择。此组件可用于 React UI 内容，并且非常容易集成。我们可以使用以下方法在 ReactJS 中使用按钮组件。

创建 react app 和安装模块

步骤 1：使用下面给出的命令构建一个 React 应用程序

步骤 2：创建项目文件夹后，使用给定的命令导航到文件夹名称

步骤 3：使用以下命令安装 Material-UI 模块，在创建 ReactJS 应用程序后

项目结构：它将如下所示。

项目结构

App.js：现在，您必须在 App.js 文件中编写以下代码。

在这里，App 是我们代码中编写的默认组件。

JavaScript

import React from 'react';
import Button from '@material-ui/core/Button';
  
const App = () => {
  
  return (
    <div style={{
      display: 'flex',
      margin: 'auto',
      width: 400,
      flexWrap: 'wrap',
    }}>
      <div style={{ width: '100%', float: 'left' }}>
        <h3>How to use Button Component in ReactJS?</h3> <br />
      </div>
      <Button variant="contained">Default Button</Button>
      <Button variant="contained" color="primary">
        Primary Button
      </Button>
      <Button variant="contained" color="secondary">
        Secondary Button
      </Button>
      <Button variant="contained" disabled>
        Disabled Button
      </Button>
      <Button variant="contained" color="primary"
        href="#">
        Link Button
      </Button>
    </div>
  );
} 
export default App;

运行应用程序的步骤

通过从项目的根目录使用命令来运行应用程序

输出：现在打开您的浏览器并转到 https://:3000/。 您可以看到以下输出

下一个主题什么是 React 中的 Dom

← 上一个下一个 →

React 中的按钮

文本按钮

包含按钮

轮廓按钮

处理点击

注意：文档避免在组件的 API 部分提及本机道具。

颜色

大小

上传按钮

带有标签和图标的按钮

图标按钮

尺寸

颜色

定制

加载按钮

复杂按钮

第三方路由库

边框

API

如何在 ReactJS 中使用按钮组件？

运行应用程序的步骤

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

ReactJS 教程

杂项。

选择题

面试题

React 中的按钮

文本按钮

包含按钮

轮廓按钮

处理点击

注意：文档避免在组件的 API 部分提及本机道具。

颜色

大小

上传按钮

带有标签和图标的按钮

图标按钮

尺寸

颜色

定制

加载按钮

复杂按钮

第三方路由库

边框

API

如何在 ReactJS 中使用按钮组件？

运行应用程序的步骤

相关帖子

React 管理员

React 中什么是 useState

React 中的 HTML 评论

React-Paginate

ReactJS 工作

ReactJS 中的 Const

函数式构造函数

React-icons

React 中什么是 Dom

比较 Angular React 和 Vue

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器