React+AntDesign入门：二、Antdesign UI组件-按钮Button的使用

二、AntDesign UI组件-按钮

1.新建用于展示各种按钮的文件UiButton.js

import React from 'react'
import {Card,Button} from 'antd'

class UiButton {

  render() {
    return (
      

        
           无样式按钮 
           普通按钮 
           虚线按钮 
           危险按钮 
           被禁用的按钮 
        
      
    );
  }
}

export default UiButton;

2.配置下路由让我们能够测试

项目是基于ant design pro2，修改config/router.config.js

3.效果

4.给按钮们加样式

新建ui.less

button{ //所有的button的样式
  margin-right: 10px;
}

在UiButton.js中引入这个样式

import './ui.less'

效果：

5.常用的按钮

效果：

代码：

import React from 'react'
import {Card,Button,Radio} from 'antd'

import './ui.less'  //导入样式

class UiButton extends React.Component{
  //构造器
  constructor(props){
    super(props);

    this.state = {   //组件内的变量等都通过state来存取
      loading : false,  //按钮等待状态
      size : 'default'  //按钮尺寸
    };
  }

  //保存，锁定按钮
  makeLoading = ()=>{
    this.setState({loading: true});
  }
  //取消按钮等待状态
  cancelLoading = ()=>{
      this.setState({loading: false});
  }

  //改变按钮尺寸
  changeButtonSize = (e)=>{
    this.setState({size: e.target.value})
  }

  render() {
    return (
      

        
           无样式按钮 
           主题颜色的按钮 
           虚线按钮 
           危险按钮 
           被禁用的按钮 
        

        {/*icon:指定按钮图标
          shape:指定按钮形状*/}
        
          新建
          编辑
          保存
          删除
          导出
          
          查询
        

        {/*loading:等待状态，true为等待中 */}
        
          新建
          编辑
          删除
          保存
          取消等待
        

        
          
            上一步
            下一步
          
        

        {/*size:按钮尺寸*/}
        
           {/*单选组*/}
            大
            中
            小
          
          新建
          编辑
          删除
        

      
    );
  }
}

export default UiButton;