React共享单车后台管理系统开发——UI菜单button modal的使用（Andt UI组件）-蒲公英云

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTUzNDc4_size_16_color_FFFFFF_t_70

https://blog.csdn.net/qq_34829447/article/details/81977779

一.按钮组件
1.Card组件
引入Card:import {Card} from ‘antd’;

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

如:效果如下

一.按钮组件
1.Card组件
引入Card:import {Card} from ‘antd’;

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

如:效果如下

2.Button组件
引入Button组件:import {Button} from ‘antd’;
type属性值
primary表示主按钮
不写type表示默认样式按钮
dashed表示虚线按钮
danger表示危险按钮
disable属性值表示禁用按钮
icon属性值表示按钮图标样式
plus表示加号
edit表示编辑
delete表示删除
search表示搜索
download表示下载
shape属性表示按钮形状
circle表示圆形
loading属性为{true}表示加载中（此时按钮不能点击）
按钮组为Button.Group组件，用于表示包含的Button组件是一个组
size属性表示组件大小
small小按钮组件
default默认大小按钮组件
large大按钮组件
3.Radio组件
引入Radio组件:import {Radio} from ‘antd’;
Radio组件外部需要用Radio.Group组件包裹，并通过外部组件对象可以获得内部Radio组件的value值(通过e.target.value)
4.应用实例
button.js及对应添加的样式如下所示

//[/src/pages/ui/button.js]
import React,{Component} from 'react';
import {Card,Button,Radio} from 'antd';
import './ui.less';
class Buttons extends Component{
  constructor(props){
      super(props);
      this.state={
          loading:true,
          size:'default'
      }
  }
  render(){
      return(
          <div>
              <Card title="基础按钮" className="card-wrap">
                  {/*主按钮*/}
                  <Button type="primary">Imooc</Button>
                  <Button>Imooc</Button>
                  {/* 虚线按钮 */}
                  <Button type="dashed">Imooc</Button>
                  {/* 危险按钮 */}
                  <Button type="danger">Imooc</Button>
                  {/* 禁用按钮 */}
                  <Button disabled>Imooc</Button>
              </Card>
              <Card title="图形按钮" className="card-wrap">
                  {/*通过icon设定图标,shape设置形状*/}
                  <Button icon="plus">创建</Button>
                  <Button icon="edit">编辑</Button>
                  <Button icon="delete">删除</Button>
                  <Button icon="search" shape="circle"></Button>
                  <Button type="primary" icon="search">搜索</Button>
                  <Button type="primary" icon="download">下载</Button>
              </Card>
              <Card title="Loading按钮" className="card-wrap">
                  {/*通过loading属性为{true}表示加载中图标(此时按钮不能点)*/}
                  <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="按钮组">
                  <Button.Group>
                      <Button type="primary" icon="left">返回</Button>
                      <Button type="primary" icon="right">前进</Button>
                  </Button.Group>
              </Card>
              <Card title="按钮尺寸" className="card-wrap">
                  <Radio.Group value={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>
      )
  }
  handleCloseLoading=()=>{
      this.setState({
          loading:false
      });
  }
  handleChange=(e)=>{
      this.setState({
          size:e.target.value
      });
  }
}
export default Buttons;
//[/src/pages/ui/ui.less]
.card-wrap{
  button{
      margin-right: 10px;
  }
}
--------------------- 
作者：汪喆_Jack 
来源：CSDN 
原文：https://blog.csdn.net/qq_34829447/article/details/81977779 
版权声明：本文为博主原创文章，转载请附上博文链接！

5.补充知识点
当Route页面内部信息超过当前页面大小时，会出现滚动条，左侧导航栏会跟着一起滚动，导航栏下方为空白。

解决方案：

将common.less中的main的定义添加overflow:auto，表示当渲染页面高度超过当前屏幕时，自动滚动

二.弹框组件
1.Modal基本组件
引用Modal:import {Modal} from ‘antd’;

Model组件属性

title属性作为标题显示
visible属性参数为{true|false}，为true则显示，false则不显示
onCancel属性值为一个函数，执行当点击模态框的×或cancel选项时执行的方法
Model内部填写的内容将作为模态框的正文内容

知识点：

组件的onClick值为this.handleName（即函数名）时，表示一开始就会自动调用，无法传参；当需要传参时，需要将onClick中的内容变为箭头函数，返回代参的调用方法从而实现点击时执行函数并传参调用方法
传递的参数如果想作为对象的键时，需要用[]进行包裹，如果没包裹直接放置键的位置则视为变量而报错。
实例代码

//[src/pages/ui/modal.js]
import React,{Component} from ‘react’;
import {Card,Button,Modal} from ‘antd’;
import ‘./ui.less’;

class Models extends Component{
state={
showModal1:false,
showModal2:true,
showModal3:true,
showModal4:true
}
handleOpen=(type)=>{
this.setState({
[type]:true
})
}
render(){
return(

{
this.setState({
showModal1:false
})
}}

              >  
              <p>欢迎使用喆哥版弹框</p>  
          </Modal>  
      </div>  
  );

}
}
export default Models;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
效果图

2.Model自定义页脚、顶部20px弹框、水平垂直居中
Model自定义页脚实现方式

Model组件的visible属性{true}或{false}实现是否显示
Model组件的okText属性设置OK选项的显示内容
Model组件的cancelText属性设置Cancel选项显示内容
Model顶部20px弹框实现方式

利用style属性值为{ {top:20}}设定距顶部20px
Model水平居中实现方式

利用Model组件的wrapClassName设定样式名称
实例代码

import React,{Component} from ‘react’;
import {Card,Button,Modal} from ‘antd’;
import ‘./ui.less’;
class Models extends Component{
state={
showModal1:false,
showModal2:false,
showModal3:false,
showModal4:false
}
handleOpen=(type)=>{
this.setState({
[type]:true
})
}
render(){
return(

{
this.setState({
showModal1:false
})
}}

              >  
              <p>欢迎使用喆哥版弹框</p>  
          </Modal>  
          <Modal  
              title="React"  
              visible=\{this.state.showModal2\}  
              okText="好的"  
              cancelText="算了"  
              onCancel=\{()=>\{  
                  this.setState(\{  
                      showModal2:false  
                  \})  
              \}\}  
              >  
              <p>欢迎使用喆哥版弹框</p>  
          </Modal>  
          <Modal  
              title="React"  
              visible=\{this.state.showModal3\}  
              style=\{ \{top:20\}\}  
              onCancel=\{()=>\{  
                  this.setState(\{  
                      showModal3:false  
                  \})  
              \}\}  
              >  
              <p>欢迎使用喆哥版弹框</p>  
          </Modal>  
          <Modal  
              title="React"  
              visible=\{this.state.showModal4\}  
              wrapClassName="vertical-center-modal"  
              onCancel=\{()=>\{  
                  this.setState(\{  
                      showModal4:false  
                  \})  
              \}\}  
              >  
              <p>欢迎使用喆哥版弹框</p>  
          </Modal>  
      </div>  
  );

}
}
export default Models;
-——————————
作者：汪喆_Jack
来源：CSDN
原文：https://blog.csdn.net/qq\_34829447/article/details/81977779
版权声明：本文为博主原创文章，转载请附上博文链接！

//[/src/pages/ui/button.js]
import React,{Component} from ‘react’;
import {Card,Button,Radio} from ‘antd’;
import ‘./ui.less’;
class Buttons extends Component{
constructor(props){
super(props);
this.state={
loading:true,
size:’default’
}
}
render(){
return(

{/*主按钮*/}

{/* 虚线按钮 */}

{/* 危险按钮 */}

{/* 禁用按钮 */}

{/*通过icon设定图标,shape设置形状*/}

{/*通过loading属性为{true}表示加载中图标(此时按钮不能点)*/}

小
中
大

)
}
handleCloseLoading=()=>{
this.setState({
loading:false
});
}
handleChange=(e)=>{
this.setState({
size:e.target.value
});
}
}
export default Buttons;

//[/src/pages/ui/ui.less]
.card-wrap{
button{
margin-right: 10px;
}
}

效果图

5.补充知识点
当Route页面内部信息超过当前页面大小时，会出现滚动条，左侧导航栏会跟着一起滚动，导航栏下方为空白。

解决方案：

将common.less中的main的定义添加overflow:auto，表示当渲染页面高度超过当前屏幕时，自动滚动

二.弹框组件
1.Modal基本组件
引用Modal:import {Modal} from ‘antd’;

Model组件属性

知识点：

//[src/pages/ui/modal.js]
import React,{Component} from ‘react’;
import {Card,Button,Modal} from ‘antd’;
import ‘./ui.less’;

class Models extends Component{
state={
showModal1:false,
showModal2:true,
showModal3:true,
showModal4:true
}
handleOpen=(type)=>{
this.setState({
[type]:true
})
}
render(){
return(

{
this.setState({
showModal1:false
})
}}

              >  
              <p>欢迎使用喆哥版弹框</p>  
          </Modal>  
      </div>  
  );

}
}
export default Models;

效果图

2.Model自定义页脚、顶部20px弹框、水平垂直居中
Model自定义页脚实现方式

利用style属性值为{ {top:20}}设定距顶部20px
Model水平居中实现方式

利用Model组件的wrapClassName设定样式名称
实例代码

{
this.setState({
showModal1:false
})
}}

              >  
              <p>欢迎使用喆哥版弹框</p>  
          </Modal>  
          <Modal  
              title="React"  
              visible=\{this.state.showModal2\}  
              okText="好的"  
              cancelText="算了"  
              onCancel=\{()=>\{  
                  this.setState(\{  
                      showModal2:false  
                  \})  
              \}\}  
              >  
              <p>欢迎使用喆哥版弹框</p>  
          </Modal>  
          <Modal  
              title="React"  
              visible=\{this.state.showModal3\}  
              style=\{ \{top:20\}\}  
              onCancel=\{()=>\{  
                  this.setState(\{  
                      showModal3:false  
                  \})  
              \}\}  
              >  
              <p>欢迎使用喆哥版弹框</p>  
          </Modal>  
          <Modal  
              title="React"  
              visible=\{this.state.showModal4\}  
              wrapClassName="vertical-center-modal"  
              onCancel=\{()=>\{  
                  this.setState(\{  
                      showModal4:false  
                  \})  
              \}\}  
              >  
              <p>欢迎使用喆哥版弹框</p>  
          </Modal>  
      </div>  
  );