React之Antd组件
Modal对话框
Modal.method()动态设置确认框和提示框
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.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>
</div>
);
}
Spin加载Loading
自定义指示符
render(){
const icon = <Icon type="loading" style={{fontSize:24}}/>
return (
<div>
<Card title="Spin用法" className="card-wrap">
<Spin indicator={icon} style={{ marginLeft: 10 }} spinning={true}/>
</Card>
</div>
)
}
自定义全局默认 Spin 的元素
静态方法
Spin.setDefaultIndicator(indicator: ReactNode)
Notification通知提醒框
openNotification = (type,direction)=>{
//一个全局配置方法，在调用前提前配置，全局一次生效。
if (direction){
notification.config({
placement: direction
})
}
notification[type]({
message:'发工资了',
description:'上个月考勤22天，迟到12天，实发工资250，请笑纳'
});
}
render(){
return (
<div>
<Card title="通知提醒框" className="card-wrap">
<Button type="primary" onClick={()=>this.openNotification('success')}>Success</Button>
<Button type="primary" onClick={()=>this.openNotification('info')}>Info</Button>
<Button type="primary" onClick={()=>this.openNotification('warning')}>Warning</Button>
<Button type="primary" onClick={()=>this.openNotification('error')}>Error</Button>
</Card>
<Card title="通知提醒框" className="card-wrap">
<Button type="primary" onClick={() => this.openNotification('success','topLeft')}>Success</Button>
<Button type="primary" onClick={() => this.openNotification('info','topRight')}>Info</Button>
<Button type="primary" onClick={() => this.openNotification('warning','bottomLeft')}>Warning</Button>
<Button type="primary" onClick={() => this.openNotification('error','bottomRight')}>Error</Button>
</Card>
</div>
);
Message全局提示
showMessage = (type)=>{
message[type]("恭喜你，操作成功");
}
render(){
return (
<div>
<Card title="全局提示框" className="card-wrap">
<Button type="primary" onClick={()=>this.showMessage('success')}>Success</Button>
<Button type="primary" onClick={()=>this.showMessage('info')}>Info</Button>
<Button type="primary" onClick={()=>this.showMessage('warning')}>Warning</Button>
<Button type="primary" onClick={()=>this.showMessage('error')}>Error</Button>
<Button type="primary" onClick={()=>this.showMessage('loading')}>Loading</Button>
</Card>
</div>
);
}
Tabs标签页
Tab带图的页签
handleCallback = (key)=>{
message.info("Hi,您选择了页签："+key)
}
<Card title="Tab带图的页签" className="card-wrap">
<Tabs defaultActiveKey="1" onChange={this.handleCallback}>
<TabPane tab={<span><Icon type="plus" />Tab 1</span>} key="1">欢迎学习React课程</TabPane>
<TabPane tab={<span><Icon type="edit" />Tab 2</span>} key="2">欢迎学习React课程</TabPane>
<TabPane tab={<span><Icon type="delete" />Tab 3</span>} key="3">React是一个非常受欢迎的MV*框架</TabPane>
</Tabs>
</Card>
Switch开关
使用Switch组件无法显示为true状态,需要一个设置额外的属性
valuePropName，同样也适用于Checkbox组件
<FormItem label="是否已婚" {...formItemLayout}>
{
getFieldDecorator('isMarried', {
valuePropName:'checked',
initialValue: true
})(
<Switch/>
)
}
</FormItem>
- 效果
Form表单
实现一个简单的登录表单
import React from "react";
import { Card, Form, Input, Button, message, Icon, Checkbox } from "antd";
const FormItem = Form.Item;
class FormLogin extends React.Component{
handleSubmit = ()=>{
//获取表单值
let userInfo = this.props.form.getFieldsValue();
//表单校验
this.props.form.validateFields((err,values)=>{
//校验通过
if(!err){
message.success(`${userInfo.userName} 恭喜你，您通过本次表单组件学习，当前密码为：${userInfo.userPwd}`)
}
})
}
render(){
const { getFieldDecorator } = this.props.form;
return (
<div>
<Card title="登录水平表单" style={{marginTop:10}}>
<Form style={{width:300}}>
<FormItem>
{
getFieldDecorator('userName',{
initialValue:'',
rules:[
{
required:true,
message:'用户名不能为空'
},
{
min:5,max:10,
message:'长度不在范围内'
},
{
pattern:new RegExp('^\\w+$','g'),
message:'用户名必须为字母或者数字'
}
]
})(
<Input prefix={<Icon type="user"/>} placeholder="请输入用户名" />
)
}
</FormItem>
<FormItem>
{
getFieldDecorator('userPwd', {
initialValue: '',
rules: []
})(
<Input prefix={<Icon type="lock" />} type="password" placeholder="请输入密码" />
)
}
</FormItem>
<FormItem>
{
getFieldDecorator('remember', {
valuePropName:'checked',
initialValue: true
})(
<Checkbox>记住密码</Checkbox>
)
}
<a href="#" style={{float:'right'}}>忘记密码</a>
</FormItem>
<FormItem>
<Button type="primary" onClick={this.handleSubmit}>登录</Button>
</FormItem>
</Form>
</Card>
</div>
);
}
}
export default Form.create()(FormLogin);
- 效果
Table
简单表格
import React from "react";
import {Card,Table} from "antd";
export default class SimpleTable extends React.Component{
componentWillMount() {
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
];
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
];
this.setState({
dataSource,
columns
})
}
render() {
return(
<div>
<Card title="简单表格">
<Table
bordered
columns={this.state.columns}
dataSource={this.state.dataSource}
>
</Table>
</Card>
</div>
)}
}
- 效果
动态渲染时数据源key值处理
若后端接口返回的数据没有
key字段，可动态添加不影响源数据
request = ()=>{
let _this = this;
axios.ajax({
url:'/api/v1/getTableData',
data:{
params:{
page:this.params.page
}
}
}).then((res)=>{
if(res.code == 0){
//数据添加key属性，返回新数组，不影响源数据
res.result.map((item, index) => {
item.key = index;
})
this.setState({
dataSource:res.result
})
}
})
}
固定表头
官方文档：需要指定
column的width属性，否则列头和内容可能不对齐。如果指定width不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局
- 需要指定
column的width属性 - 添加
scroll={{y:240}},数值根据内容调整
<Table
bordered
scroll={{y:240}}
columns={this.state.columns}
dataSource={this.state.dataSource}
/>
单选表格行点击单选
通过设置行属性
onRow实现单选选中
onClickRow=(record ,index)=>{
let selectKeys = [index]
Modal.info({
title:'提示',
content:`用户名：${record.userName},用户爱好：${record.interest}`
})
this.setState({
selectedRowKeys: selectKeys,
selectedItem:record
})
}
render() {
const {selectedRowKeys} = this.state
const rowSelection ={
type: "radio",
selectedRowKeys
}
return(
<div>
<Card title="单选表格">
<Table columns={this.state.columns}
dataSource={this.state.dataSource}
bordered
rowSelection={rowSelection}
onRow={(record,index) => {
return {
// 点击行选中
onClick: () => {
this.onClickRow(record,index)
},
};
}}
pagination={false}>
</Table>
</Card>
</div>
);
}
Pagination分页
自定义分页组件
/**
* 基于Antd Pagination分页组件
* @param data 参数
* @param callback 回调函数
* */
pagination(data,callback){
return {
onChange:(current)=>{
callback(current)
},
current:data.result.page,
pageSize:data.result.page_size,
total: data.result.total_count,
showTotal:()=>{
return `共${data.result.total_count}条`
},
showQuickJumper:true
}
},
- 效果
ConfigProvider全局化配置
antd目前的默认文案是英文,如果需要使用其他语言,可以参考下面的方案
import { ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
ReactDOM.render(
<ConfigProvider locale={zhCN}>
<Router />
</ConfigProvider>
,
document.getElementById('root')
);
封装查询组件
- 效果
定义查询组件
import React from "react";
import {Input, Select, Button, Form, Checkbox, Radio, DatePicker} from "antd"
import "./index.less"
const FormItem = Form.Item
const Option = Select.Option
class SearchForm extends React.Component{
/** 获取select option项
* @param data
* */
getOptionList=(data)=>{
if(!data){
return []
}
const options = []
data.map((item)=>{
options.push(<Option label={item.title} key={item.key} className="optionItemCss">{item.title}</Option>)
})
return options
}
/**
* 查询，传递查询参数
* */
query=()=>{
//获取表单数据
const fieldsValue = this.props.form.getFieldsValue();
this.props.searchFormParam(fieldsValue)
}
/**
* 重置表单数据
* */
reset=()=>{
this.props.form.resetFields();
}
//初始化表单数据
initFormList=()=> {
const { getFieldDecorator} = this.props.form;
//获取表单配置参数
const formList = this.props.formList;
const formItemList = [];
if(formList && formList.length > 0){
formList.forEach((item)=>{
let label = item.label
let field = item.field
let placeholder = item.placeholder
// let initialValue = item.initialValue
let width = item.width
//let list = item.list
//输入文本框
if(item.type === "INPUT"){
const INPUT = <FormItem label={label} key={field}>
{
getFieldDecorator([field], {
initialValue: item.initialValue
})(
<Input type="text" placeholder={placeholder} />
)
}
</FormItem>
formItemList.push(INPUT)
}
//select选择器
else if(item.type === "SELECT"){
const SELECT = <FormItem label={label} key={field}>
{
getFieldDecorator([field], {
initialValue: item.initialValue || []
})(
<Select
style={{ width: width }}
placeholder={placeholder}
>
{this.getOptionList(item.optionList)}
</Select>
)
}
</FormItem>
formItemList.push(SELECT)
}
//checkbox选择器
else if(item.type === "CHECKBOX"){
const CHECKBOX = <FormItem label={label} key={field}>
{
getFieldDecorator([field], {
valuePropName: 'checked',
initialValue: item.initialValue || true //true | false
})(
<Checkbox>
{label}
</Checkbox>
)
}
</FormItem>
formItemList.push(CHECKBOX)
}
//DatePicker(开始 --> 结束)时间段选择器
else if (item.type == "DATEPICKER"){
//开始时间
const begin_time = <FormItem label="订单时间" key={field}>
{
getFieldDecorator('begin_time')(
<DatePicker showTime={true} placeholder={placeholder} format="YYYY-MM-DD HH:mm:ss"/>
)
}
</FormItem>;
formItemList.push(begin_time)
//结束时间
const end_time = <FormItem label="~" colon={false} key={field}>
{
getFieldDecorator('end_time')(
<DatePicker showTime={true} placeholder={placeholder} format="YYYY-MM-DD HH:mm:ss" />
)
}
</FormItem>;
formItemList.push(end_time)
}
})
}
return formItemList
}
render() {
return(
<div>
<Form layout="inline">
{ this.initFormList() }
</Form>
<FormItem>
<Button type="primary" style={{ margin: '0 20px' }} onClick={this.query}>查询</Button>
<Button onClick={this.reset}>重置</Button>
</FormItem>
</div>
);
}
}
export default Form.create({})(SearchForm)
定义查询参数formList
formList = [
{
type:'SELECT',
label:'城市',
field:'city',
placeholder:'全部',
initialValue:'aa',
width:80,
optionList: [{ key: 'aa', title: '全部' }, { key: 'bb', title: '北京' }, { key: 'cc', title: '天津' }, { key: 'dd', title: '上海' }]
},
{
type: 'DATEPICKER'
},
{
type: 'SELECT',
label: '订单状态',
field:'order_status',
placeholder: '全部',
initialValue: 'sq',
width: 80,
optionList: [{ key: 'sq', title: '全部' }, { key: 'se', title: '进行中' }, { key: 'rs', title: '结束行程' }]
}
]
使用组件
<Card title="搜索组件">
<SearchForm formList={this.formList} searchFormParam={this.queryTable}></SearchForm>
</Card>
4254
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
