【共享单车】—— React后台管理系统开发手记：UI菜单各个组件使用（Andt UI组件）...

【共享单车】—— React后台管理系统开发手记：UI菜单各个组件使用（Andt UI组件）

前言：以下内容基于React全家桶+AntD实战课程的学习实践过程记录。最终成果github地址：https://github.com/66Web/react-antd-manager，欢迎star。

---

一、按钮Button

• pages->ui->button.js：对应路由/admin/ui/buttons

import React from 'react';
import {Card, Button, Radio} from 'antd'
import './ui.less'

class Buttons extends React.Component{

  state = {
      loading: true,
      size: 'default'
  }  
   
  handleCloseLoading = () =>{
      this.setState({
          loading: false
      })
  } 

  handleChange = (e) => {
      this.setState({
          size: e.target.value
      })
  }

  render(){
      return(
          <div>
              <Card title="基础按钮" className="card-wrap">
                    <Button type="primary">提交</Button>  
                    <Button>普通</Button>
                    <Button type="dashed">非重要功能</Button>  
                    <Button type="danger">删除</Button>
                    <Button disabled>禁用</Button>             
              </Card>
              <Card title="图形按钮" className="card-wrap">
                    <Button icon="plus">创建</Button>  
                    <Button icon="edit">编辑</Button>
                    <Button icon="delete">删除</Button>  
                    <Button shape="circle" icon="search"></Button>
                    <Button type="primary" icon="search">搜索</Button>
                    <Button type="primary" icon="download">下载</Button>               
              </Card>
              <Card title="Loading按钮" className="card-wrap">
                    <Button type="primary" loading={this.state.loading}>确定</Button>  
                    <Button type="primary" shape="circle" loading={this.state.loading}></Button>
                    <Button loading={this.state.loading} >点击加载</Button>  
                    <Button shape="circle" loading={this.state.loading}></Button>
                    <Button type="primary" onClick={this.handleCloseLoading}>关闭</Button>               
              </Card>
              <Card title="按钮组" style={
      {marginBottom:10}}>
                    <Button.Group>
                        <Button type="primary" icon="left">返回</Button>
                        <Button type="primary" icon="right">前进</Button>
                    </Button.Group>              
              </Card>
              <Card title="按钮尺寸" className="card-wrap">
                    <Radio.Group size={this.state.size} onChange={this.handleChange}>
                        <Radio value="small">小</Radio>
                        <Radio value="default">中</Radio>
                        <Radio value="large">大</Radio>
                    </Radio.Group>
                    <Button type="primary" size={this.state.size}>Imooc</Button>  
                    <Button size={this.state.size}>Imooc</Button>
                    <Button type="dashed" size={this.state.size}>Imooc</Button>  
                    <Button type="danger" size={this.state.size}>Imooc</Button>               
              </Card>
          </div>
      );
  }
}
export default Buttons;

• Button组件

1. type属性 ：表示按钮类型
2. disable属性：表示禁用按钮
3. icon属性：表示按钮图标样式   icon图标集合
4. shape属性：表示按钮形状（circle表示圆形）
5. loading属性：为{true}表示加载中（此时按钮不能点击）
6. size属性：表示组件大小
7. Button.Group按钮组组件：表示包含的Button组件是一个组

• Card组件

1. title属性用于标注卡片上方标题

• Radio组件

1. 外部需要用Radio.Group组件包裹
2. 通过外部组件对象可以获得内部Radio组件的value值(通过e.target.value)

• 坑：Route页面内容超过屏幕时，会出现滚动条，左侧下方出现空白区
• 解决：ui.less中给main添加overflow:auto; 当渲染页面高度超过当前屏幕时，自动滚动

   

二、弹框Modal

• pages->ui->modals：对应路由/admin/ui/modals

import React from 'react';
import {Card, Button, Modal} from 'antd'
import './ui.less'

export default class Buttons extends React.Component{
    state = {
       showModal1: false,
       showModal2: false,
       showModal3: false,
       showModal4: false
    }
    handleOpen = (type) => {
        this.setState({
           [type]: true
        }) 
    }
    handleConfirm = (type) => {
        Modal[type]({
            title: '确认？',
            content:'你确认你学会了React了吗？',
            onOk() {
                console.log('ok')
            },
            onCancel() {
                console.log('Cancel')
            }
        })
    }
    render(){
        return (
            <div>
                <Card title="基础模态框" className="card-wrap">
                    <Button type="primary" onClick={() => this.handleOpen('showModal1')}>Open</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal2')}>自定义页脚</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal3')}>顶部20px页脚</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal4')}>水平垂直居中</Button>
                </Card>
                <Card title="信息确认框" className="card-wrap">
                    <Button type="primary" onClick={() => this.handleConfirm('confirm')}>Confirm</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('info')}>Info</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('success')}>Success</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('warning')}>Warning</Button>
                </Card>