Ant Design 学习记录

遇到的问题：

• 　　点击列表中的一个字段 ， 显示出一条指定id（其他筛选条件的）数据

解决这个问题之前，要先了解 Antd的 Table中的  Column  列描述数据对象，是 columns 中的一项，Column 使用相同的 API。  官网地址

从中我们可以知道 :  render  生成复杂数据的渲染函数，参数分别为（当前行的值，当前行数据，行索引），@return 里面可以设置表格行/列合并 类型是函数 (text, record, index) => { }

点击后弹出以下列表

解决：

两种写法 ：

1. 直接给子组件传 props值， 然后子组件渲染this.props.item
2. 给子组件传id值，然后子组件通过URL传给后台，后台筛选出满足条件的数据。

 import React, {Component} from 'react';
 import { PageHeader, Table, Input, Card } from "antd";
 import HttpUtils from "../../utils/HttpUtils";
 import moment from "moment";
 import FilterForm from "../../components/Filter";
 import Team from './StatisticalTeam';
 import Share from './StatisticalShare';
 import User from './StatisticalUser';

 const {TextArea} = Input;
 const select = [
     {
         name: '时间',
         type: 'date',
         dataIndex: ['start_time', 'end_time'],
         // wrap: 24
     }
 ]

 export default class Hello extends Component {
     constructor(props) {
         super(props);
         this.state = {
             form: {
                 pers: ,
                 page:
             },
             loading:false,
             values: {},
             dataSource: [],
             value: '',
             count: ''
         };
         this.columns = [
             {
                 width:,
                 title: '记录创造时间',
                 dataIndex: 'first_day',
                 key: 'first_day',
                 render: (props) => {
                     // return this.timestampToTime(props);
                     const  time =  this.timestampToTime(props);
                    return moment(time).format('YYYY-MM-DD hh:mm:ss')
                 }
             },
             {
                 title: '分享',
                 dataIndex: 'share_award_real_amount',
                 key: 'share_award_real_amount',
                 render: (text, record) => {
                     return (
                         <div
                         onClick={() => {
                             this.setState({
                                 visible_pwd: true,
                                 user_id: record.id
                             })
                         }}

                         style={{marginRight: , cursor: "pointer", color: '#40a9ff'}}
                         >
                               <Share item={record} loadUserList={()=> {
                                 this._loadUserList()
                             }}/>
                     </div>
                     )
                 }
             }, {
                 title: '团队',
                 // dataIndex: 'share_award_real_amount',
                 // key: 'share_award_real_amount',
                 render: (text, record) => {
                     return (
                         <div
                         onClick={() => {
                             this.setState({
                                 visible_pwd: true,
                                 user_id: record.id
                             })
                         }}

                         style={{marginRight: , cursor: "pointer", color: '#40a9ff'}}
                         >
                             <Team item={record} loadUserList={()=> {
                                 this._loadUserList()
                             }}/>
                     </div>
                     )
                 }
             }, {
                 width: ,
                 title: '用户',
                 render: (text, record) => {
                     return (
                         <div
                         onClick={() => {
                             this.setState({
                                 visible_pwd: true,
                                 user_id: record.id
                             })
                         }}

                         style={{marginRight: , cursor: "pointer", color: '#40a9ff'}}
                         >
                               <User   happy={record}  item={record} loadUserList={()=> {
                                 this._loadUsreList()
                             }}/>
                     </div>
                     )
                 }

             },
         ]
     };

     componentDidMount() {
         this.getUserList()
     }
     //处理六位小数
     toDecimal=(x)=>{
         var f = parseFloat(x);
         if (isNaN(f)) {
           return;
         }
         f = Math.round(x*)/;
         return f;
     }
     //处理时间戳
     timestampToTime = (timestamp) => {
         var date = new Date(timestamp * );//时间戳为10位需*1000，时间戳为13位的话不需乘1000
         var Y = date.getFullYear() + '-';
         var M = (date.getMonth()+ <  ? ''+(date.getMonth()+) : date.getMonth()+) + '-';
         var D = date.getDate() + ' ';
         var h = date.getHours() + ':';
         var m = date.getMinutes() + ':';
         var s = date.getSeconds();
         return Y+M+D+h+m+s;
     }

     getUserList() {
         this.setState({loading:true})
         HttpUtils.postForm('/api/auex/statistics/award/list', {
             ...this.state.form,
             order: "id desc",
             ...this.state.values
         }).then(res => {
         this.setState({loading:false})
             if (res.status == ) {
                 this.setState({
                     dataSource: res.data,
                     count: res.count
                 })
             }
             console.log(res);
         }).catch(err => {
         this.setState({loading:false})
             window.$message.error('通讯失败')
         })
     }

     onSubmit = (value) => {
         console.log(value)
         this.setState({
             form: {
                 page: ,
                 pers: this.state.form.pers,

             },
             values: value
         }, () => {
             this.getUserList()
         })
     }
     onReset = () => {
         this.setState({
             values: {}
         }, () => {
             this.getUserList();
         })
     }

     getCurrent = (page) => {
         console.log(page)
         this.setState({
             form: {
                 page: page,
                 pers: this.state.form.pers
             }
         }, () => this.getUserList())
     }
     changePers = (current, size) => {
         this.setState({
             form: {
                 page: current,
                 pers: size
             }
         }, () => this.getUserList())
     }

     render() {
         return (
             <div>
                 <PageHeader title="用户列表" subTitle="查看用户信息" style={{marginBottom: }}/>
                 <FilterForm select={select} onSubmit={this.onSubmit} onReset={this.onReset} />
                 <Card>
                     <Table
                         loading={this.state.loading}
                         dataSource={this.state.dataSource}
                        columns={this.columns }
                        title={() => `记录条数：${this.state.count}条`}
                        pagination={{
                            showTotal: (total) => {
                                return <div style={{display: 'flex'}}>
                                    <div style={{paddingLeft: }}>总共{total}条</div>
                                </div>
                            },
                            showSizeChanger: true,
                            onShowSizeChange: this.changePers,
                            pageSizeOptions: ['', '', '', ''],
                            showQuickJumper: true,
                            current: this.state.form.page,
                            total: this.state.count,
                            onChange: this.getCurrent
                        }}
                 />
                 </Card>
             </div>
         )
     };
 }

列表页面

补充：

0.给子组件传值  ：  <Share happy={record} loadUserList={()=> {this._loadUserList()}}/>   子组件接收值

1.设置state中值的时候 不要直接赋值 ， 要 使用规范写法

 this.setState({
                             visible_father: true
                         })

2.子组件接到数后不能展示列表？

  onClick={() => {
                         this.setState({
                             visible_father: true  //修改列表展示为true
                         })
                     }}

　3.dataSource中的数据this.props.item 是对象  所以要再外面加一个[] 使其变为数组

4.const {number, visible_father, data, loading,} = this.state;  解构赋值后 ， 就不需要在this.state.xxx了

5.<Modal /> 有个visible属性，表示是否显示对话框。

占位

需要掌握的：

1.Form表单

• Form.create   经过 Form.create 包装的组件将会自带 this.props.form 属性，this.props.form  常用API ：  getFieldDecorator 用于和表单进行双向绑定，详见下方描述

class CustomizedForm extends React.Component {}

CustomizedForm = Form.create({})(CustomizedForm);

this.props.form.getFieldDecorator(要传的值, options)

经过 getFieldDecorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

1. 你不再需要也不应该用 onChange 来做同步，但还是可以继续监听 onChange 等事件。

2. 你不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 里的 initialValue。

3. 你不应该用 setState，可以使用 this.props.form.setFieldsValue 来动态改变表单值(可以设置默认值)。

• validateFields  校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件   /  resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (err) {
                return;
            }
            values.rate = values.rate / ;
            window.$http.postForm('/api/', {...this.state.item,...values}).then(res => {
                if (res.status === ) {
                    window.$message.success('提交成功！');
                    this.props.form.resetFields();
                    this.setState({visible: false})
                    this.getBonusList()
                } else {
                    window.$message.error(res.message);
                }
            }).catch((err) => {
                window.$message.error('通讯失败');
            })
        });
    }

• Form.Item 表单域

2. Affix 固钉  https://ant.design/components/affix-cn/#header

注意：Affix 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 Affix 为绝对定位：

<Affix style={{ position: 'absolute', top: y, left: x }}>...</Affix>

3.Card 卡片 https://ant.design/components/card-cn/#header

4.父子传值   ， 传方法

首先父组件调用子组件，写一个item = { recodr（columns表单所有数据） }   写一个 refreshList方法

 <UpdateCategory item={record} refreshList={() => {

     this.custom_table.getList()

 }}/>

然后再子组件调用 (使用this.props.XXX)调用父组件的XXX

调用属性 （这里又把父组件的值传给了子组件CustomForm）
<CustomForm
  content={this.state.content} onSubmit={this.onSubmit} url={'/api/backend/distribution/time/category/save'}
  value={{ id: this.props.item.id }}
  values={this.props.item}
  space={}
/>

调用方法

  onSubmit = () => {
     this.setState({
        visible: false
      })
     this.props.refreshList()
  }

5.弹窗 Modal

6.文本域： const { textArea } = Input  去掉右下角调整大小按键 ： CSS resize：none；

7.上传图片  Upload

8.修改状态

  {
      // width: 150,
      title: '操作',
      dataIndex: 'status', //verified
      key: 'status',
      render: (text, item) => (
           <>
             {item.status !=  ? null :
                 <Switch
                     checked={text === }
                     onChange={() => {
                         this.changeStatus(text, item.id);
                     }}
                 />}
         </>
       )
  }

 changeStatus(text, id) {

        const toast = window.$message.loading('修改状态中');

        HttpUtils.postForm(' /api/admin/user/asset/releasedRuleUpdate', {

            id: id,

            status:  2

        }).then(res => {

            toast();

            if (res.status === 10000) {

                window.$message.success('修改状态成功');

                this.getData();

            } else if(res.status!==18888){

                window.$message.error(res.message);

            }

        }).catch(err => {

            toast();

            window.$message.error('通讯失败');

        })

    }

9.删除一行记录

{
                title: '操作',
                render: (text, item) => {
                    return (
                        <div>
                            <Button size={'small'} type={'primary'} onClick={() => {
                                this.props.history.push('/content/carousel/edit/' + item.id)
                            }}>
                                编辑
                            </Button>
                            <Popconfirm
                                title="确定要删除吗？"
                                okText="确定"
                                cancelText="取消"
                                onConfirm={() => {
                                    window.$http.postForm('/api/web/carousel/delete', {id: item.id}).then(res => {
                                        if (res.status === ) {
                                            window.$message.success('删除成功');
                                            this._loadNewsList()
                                        } else if (res.status !== ) {
                                            window.$message.error(res.message);
                                        }
                                    })
                                }}
                            >
                                <Button size={'small'} type={'danger'} style={{marginLeft: }} onClick={() => {
                                }}>删除</Button>
                            </Popconfirm>
                        </div>
                    );
                }
            }

10 徽标微　　

import {Badge} from '@ant-design/react-native';

<Badge dot>
            <Touchable style={{position: 'relative'}}>
              <Image source={message} />
            </Touchable>
</Badge>

import {Badge} from '@ant-design/react-native';

<Badge dot>
            <Touchable style={{position: 'relative'}}>
              <Image source={message} />
            </Touchable>
</Badge>

11. 从接口获取交易对 / 列表数组

    getSymobls() {
        HttpUtils.postForm('/api/teacher/trade/exchange/symbols', {}).then(res => {
            if (res.status === ) {
                let arr1 = new Set(res.data.map((item) => item.symbol))
                let symbol = Array.from(arr1).map(item => ({id: item, name: item}));
                select[].option = symbol; //添加列表
                this.setState({
                    select: this.state.select,
                })
            }
        }).catch((err) => {
            console.log(err);
        })
    }

12.如何看懂ant的文档

这里提供了2中格式化方式

第一种 告诉你了 value是Date值（日期），date是字符串 ，所以  写法如下

format={(value) => moment(value).format('YYYY.MM')}