关于react-Ant Design框架Button按钮的基础用法

前言

最近在学习react-Ant Design框架，把button组件一些基础用法记录一下

引入框架 使用组件

基础按钮

首先我们得导入Ant Design和里面的button，才能进行使用。当然得确保之前在项目中你安装了Ant Design
下面是基础款按钮：

import React, { memo } from 'react'
import { Button } from 'antd'
import './index.scss'

// React.memo是一个高阶组件,memo类似于PureComponent,不同的是,memo是一个function组件
export default memo(function Index() {
  return (
    <div className='wrap'>
      <Card title='基础款按钮' className='button-wrap'>
        <Button>按钮</Button>
        <Button type='primary'>按钮</Button>
        <Button type='danger'>按钮</Button>
        <Button type='dashed'>按钮</Button>
      </Card>
    </div>
  )
})

效果：

带icon的按钮

还可以导入icon实现带图标的按钮：

import {
  PlusOutlined,
  DeleteOutlined,
  EditOutlined,
  SearchOutlined,
  LeftOutlined,
  RightOutlined
  } from '@ant-design/icons'

<Card title='图表款按钮组' className='button-wrap'>
  <Button icon={<PlusOutlined />}>添加</Button>
  <Button icon={<DeleteOutlined />}>删除</Button>
  <Button icon={<EditOutlined />}>修改</Button>
  <Button icon={<SearchOutlined />}>查找</Button>
  <Button icon={<SearchOutlined />} shape='circle'></Button>
  <Button icon={<SearchOutlined />} shape='round'></Button>
</Card>

效果：

按钮的loading状态

按钮组件还可以通过loading实现加载的状态，这里我们做一个效果：点击按钮控制另一个按钮的加载状态：

export default memo(function Index() {
  const [loading, setLoadnig] = useState(true)
  return (
    <div className='wrap'>
      <Card title='loading按钮' className='button-wrap'>
        <Button type='primary' loading={loading}>加载中</Button>
        <Button onClick={e=>close()}>关闭加载</Button>
        <Button onClick={e=>open()}>打开加载</Button>
      </Card>
    </div>
  )
  function open() {
    setLoadnig(true)
  }
  function close() {
    setLoadnig(false)
  }
})

实现效果：

按钮的大小控制

还可以通过size属性修改按钮的大小，这里我们也做一个需求：通过点击单选框选择控制按钮的大小

export default memo(function Index() {
  const [size, setSize] = useState('default')
  return (
    <div className='wrap'>
      <Card title='控制按钮尺寸' className='button-wrap'>
        <Radio.Group value={size} onChange={e=>changeSize(e)}>
          <Radio value='large'>大</Radio>
          <Radio value='default'>中</Radio>
          <Radio value='small'>小</Radio>
        </Radio.Group>
          <Button type='primary' size={size}>金渡教育</Button>
          <Button type='danger' size={size}>金渡教育</Button>
          <Button type='dashed' size={size}>金渡教育</Button>
      </Card>
    </div>
  )
  function changeSize(e) {
    console.log(e)
    setSize(e.target.value)
  }
})

实现效果：