How to use antd - 10 common examples

// 收费管理 - 应收租金
import React, {Component} from 'react'
import { Tabs  } from 'antd'
import CollectRenting from './CollectRenting'
import CollectRentConduct from './CollectRentConduct'
import CollectRentFail from './CollectRentFail'
import CollectRentSuccess from './CollectRentSuccess'
// 引入组件
const TabPane = Tabs.TabPane
// React component
class ReceivableRent extends Component {
    constructor (props) {
        super(props)
        this.state = {
        }
    }
    callback = (key) => {
        console.log(key)
    }
    render () {
        console.log(1111)
        return ( this.callback}>

import React, { Component } from 'react';
import { Tabs } from 'antd';
import Header from '../../../../component/header/header';
import { TabProps } from '../../../../typings/type';
import './index.css';

import MobXApp from '../mobx';


const TabPane = Tabs.TabPane;
const tabItemClick = (key) => {
  console.log('tab click', key);
};
// https://github.com/gaearon/react-hot-loader/issues/525
// must export, not export default
export class Tab extends Component {
  render() {
    return <div>
      <header></header>
      <div>
        <h1>{this.props.message.text}</h1>
        
          
          Content of Tab Pane 2
          Content of Tab Pane 3
        </div></div>

.then( res => {
				// console.log('applyAfterware res',res);
				// else if ( res.data.publicBoard == null ) {
				// 	next();
				// }

				if ( res.code === 401 || res.code === 403 ) {
					// unauthorized, logout and redirect to login page
					if ( window.location.pathname != '/auth/logout' ) {
						message.info( translate('global.token.expired') );
						browserHistory.push('/auth/logout');
					}
				}
				else if ( res.errors && res.errors.length > 0 ) {
					if ( res.errors[0].path === '_id' ) {
						message.warning( translate('global.record.empty') );
						browserHistory.push('/dashboard');
					}
					else { next(); }
				}
				else {
					next();
				}
			});

'receive staff'(state, action) {
    // eslint-disable-next-line no-unused-vars
    const { req, res } = action.payload
    if (hasResponseError(res)) {
      message.error(res.msg, 3)
      return { ...state, loading: false }
    }
    return { data: res, loading: false }
  },
}, staffResult())

import {Form, Select, Input, Button, Row, Col, DatePicker } from 'antd'
import React from 'react'
const Option = Select.Option
const FormItem = Form.Item
const { RangePicker } = DatePicker


class CollectRentHead extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            open: '展开',
            none: 'none',
            openState: false
        }
    }
    // 清除
    handleReset = () => {
        this.props.form.resetFields()
    }

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Form, Input, Icon, Button, Dropdown, Menu, Modal, Table, Divider, Popconfirm } from 'antd';
// import StandardTable from '../../components/StandardTable';
import PageHeaderLayout from './../../layouts/pageHeaderLayout';

import styles from './../../utils/utils.less';


const FormItem = Form.Item;
const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');

// 重置密码弹框
const ResetPwdModal = Form.create()((props) => {
  const { visible, form, onCancel, onOk } = props;

  return (
     {
        e.preventDefault();

        form.validateFields((err, fieldsValue) => {
          if (err) return;
          onOk(fieldsValue);

*add({ payload, callback }, { call, select, put }) {
      const response = yield call(addGroup, payload);

      if (!response) {
        return;
      }

      if (response.code === '0') {
        message.success('添加成功');
      } else {
        message.error(response.msg);
      }

      // 刷新
      const query = yield select(state => state.group.data.query);
      yield put({ type: 'fetch', payload: query });

      if (callback) callback();
    },

callback: () => {
              // 清空表单
              form.resetFields();
              // 提示
              message.success('添加成功');
              // 关闭弹窗
              handleModalVisible();
            },
          },

copyToClipboard = (text) => {
    if (window.clipboardData && window.clipboardData.setData) {
      // IE specific code path to prevent textarea being shown while dialog is visible.
      // eslint-disable-next-line no-undef
      return clipboardData.setData('Text', text);
    } else if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
      const textarea = document.createElement('textarea');
      textarea.textContent = text;
      textarea.style.position = 'fixed';
      document.body.appendChild(textarea);
      textarea.select();
      try {
        const res = document.execCommand('copy');
        message.success(this.props.intl.formatMessage({ id: 'copy_success' }));
        return res;
      } catch (ex) {
        return false;
      } finally {
        document.body.removeChild(textarea);
      }
    }
    return false;
  }

this.props.form.validateFields(async(err, formData) => {
      if (!err) {
        this.setState({
          submitLoading: true
        });
        const submitForm = { ...formData };
        submitForm.project = this.props.pid;
        submitForm.mockRule = this.props.getApiRule();
        // alert(JSON.stringify(submitForm));
        const resp = await http.post('/api/api/add', submitForm);
        this.setState({
          submitLoading: false
        });
        if (resp.success) {
          let actionType = this.props.apiModalType === 'add' ? '添加' : '修改';
          message.success(`${actionType}成功`);
          setTimeout(() => {
            if (this.props.apiModalType === 'add') this.props.closeModal();
            this.props.refreshList();
          }, 800);
        }
      }
    });
  }