用图标反应原生元素按钮 - TypeScript

简介

在Web应用程序中，按钮是用户交互的重要元素之一。一个好的按钮不仅需要一个可见的按钮元素本身，还需要给出一些反馈，使用户知道何时点击了按钮，以及按钮执行何种操作。

本教程将介绍如何使用图标反应原生元素按钮，并使用TypeScript作为编程语言。我们使用Material UI作为React组件库。

准备工作

在开始之前，你需要在项目中集成React和Material UI，这里我们假设你已经按照官方文档配置好了这些东西。

实现

首先，我们需要创建一个ButtonWithIcon组件。这个组件包含一个原生的按钮元素和一个图标。当用户点击按钮时，按钮将会置灰，然后执行相应操作。

我们首先来看一下代码：

import React from 'react';
import Button from '@material-ui/core/Button';
import Icon from '@material-ui/core/Icon';

interface Props {
  icon: string;
  onClick: () => void;
  disabled?: boolean;
}

const ButtonWithIcon: React.FC<Props> = ({ icon, onClick, disabled = false }) => {
  return (
    <Button
      variant="contained"
      color="secondary"
      onClick={onClick}
      disabled={disabled}
      style={{ width: 120, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <Icon>{icon}</Icon>
      <span>Button Text</span>
    </Button>
  )
}

export default ButtonWithIcon;

这里我们定义了一个ButtonWithIcon组件，并接受三个props参数：

• icon：图标名称
• onClick: 点击按钮时的回调函数
• disabled：是否禁用按钮

我们在组件内部，使用Material UI的Button和Icon组件封装原生元素按钮和图标，当用户点击按钮时，执行相应的回调函数。

现在，我们需要在我们的应用中使用此组件。这里我们假设我们有一个App组件，包含了一个ButtonWithIcon组件，如下所示：

import React from 'react';
import ButtonWithIcon from './ButtonWithIcon';

const App: React.FC = () => {
  const handleClick = () => {
    console.log('Button is clicked');
  }
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
      <ButtonWithIcon icon="add" onClick={handleClick} />
    </div>
  )
}

export default App;

这里我们创建了一个App组件，并使用ButtonWithIcon组件创建了一个添加按钮，当用户点击按钮时，我们将会在控制台中输出一条信息。

结论

在这篇文章中，我们介绍了如何使用图标反应原生元素按钮，并使用TypeScript作为编程语言。我们使用了Material UI作为React组件库，通过定义一个ButtonWithIcon组件，在里面包含了按钮和图标，并实现点击按钮后的回调函数。

你可以下载或复制上面的代码片段，自己实践一下。