Ant Design 常用 API

  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 }
  }

  <FormItem
    label={'退款金额：'}
    { ...formItemLayout }
  >
    <Input />
  </Form>

  _getOrderList = () => {
    const filterData = this.props.form.getFieldsValue()
    this.props.dispatch(action.getOrderInfo({
      orderNo: filterData.orderNo || '',
      status: filterData.orderStatus || '',
    }))
  }

  this.state.businessType === '2' && this.props.from.getFieldValue('productType') !== '1' && (
    return <input />
  )

// bad
      this.state = {
        password = ''
      }
      _getPwd = e => {
        this.setState({
          password: e.target.value
        })
      }
      <Input onChange={this._getPwd}/>
// bad
      <FormItem className={style['jc-order-row']}>
       <p className={style['jc-search-item']}>订单编号:</p>
       {getFieldDecorator('orderNo')(
         <Input className={style['jc-search-input']} placeholder='订单编号'/>
       )}
     </FormItem>
// good
      <FormItem label='密码'>
        {getFieldDecorator('password', {
          initialValue: ''
        })(
          <Input />
        )}
      </FormItem>

  const { getFieldDecorator } = this.props.form
  <FormItem { ...formItemLayout } label='账号'>
    {getFieldDecorator('userName', {
      rules: [{
        required: true,    //是否需要校验
        min: 6,    //最小长度
        max: 18,    //最大长度
        whitespace: true,    // true时，不可以出现空格
        pattern: /^[0-9A-Za-z]{1,15}$/,    // 正则表达式校验
        message: '账号格式错误：只能数字和字母，最多不能超过15位'    // 错误信息
      }],
      initialValue: '默认值'
    })(
      <Input />
    )}
  </FormItem>

  _validateAmount = (rule, value, callback) => {
    const { data } = this.props
    let errorMessage = '退款金额必须小于订单剩余可退金额'
    if (value > numeral(data.amount || 0).subtract(data.refundAmount || 0).value()) {
      rule.message = errorMessage
      callback(errorMessage)
    } else if (value === undefined || value <= 0) {
      errorMessage = '请输入正确退款金额'
      rule.message = errorMessage
      callback(errorMessage)
    } else {
      callback()
    }
  }
  ...
  const { getFieldDecorator } = this.props.form
  <FormItem { ...formItemLayout } label='账号'>
    {getFieldDecorator('userName', {
      rules: [{
        required: true,    // 是否需要校验
        validator: this._validateAmount    // 校验规则
      }],
      initialValue: '默认值'
    })(
      <Input />
    )}
  </FormItem>

 // bad

 <Row>
    <Col span={12} className={styles['page-left']}>共{tableList.page.totalCount}条记录，{tableList.page.currentPage}/{tableList.page.totalPage}页</Col>
    <Col span={12}>
      <Pagination
        className={styles['pagination']}
        showQuickJumper onChange={this.handleChange}
        current={tableList.page.currentPage}
        defaultPageSize={tableList.page.pageSize}
        total={tableList.page && tableList.page.totalCount}
      ／>
    </Col>
  </Row>

// good

  <Table
    columns={this._columns}
    dataSource={tableList.result}
    rowKey={item => item.orderNo}
    pagination={false}
    bordered={true}
  />
  <Pagination
    onChange={this._handleChange}
    current={tableList.page.currentPage}    // 当前页数
    defaultPageSize={tableList.page.pageSize}    // 每页显示条数
    showTotal={total => `总共 ${tableList.page.totalCount} 条`}    // 用于显示数据总量和当前数据顺序
    total={tableList.page && tableList.page.totalCount}    // 数据总数
  />

  _columns = [{
    title: '活动时间',
    dataIndex: 'activityTimeFrom',
    key: 'activityTimeFrom',
    width: 230,
    render: (text, record) => {
      return (
        <div>
          <p>{record.activityTimeFrom}</p>
          -
          <p>{record.activityTimeTo}</p>
        </div>
      )
    }
  }, {
    title: '核销码状态',
    dataIndex: 'volumeCodeStatus',
    key: 'volumeCodeStatus',
    width: 100,
    render: (text, record) => (
      <span>
        {text === 'N' ? '未核销' : '已核销' }
      </span>
    )
  }]

// cancel onClick
  _onCancel = () => {
    this.props.dispatch(action.CLEARDATA())
  }
// action
  export const CLEARDATA = () => ({
    type: CLEAR_DATA,
  })
// reducer
  case CLEAR_DATA:
    return { ...state, ...{ orderDetail: {} }}

  /** 对话框是否可见*/
  visible?: boolean;
  /** 确定按钮 loading*/
  confirmLoading?: boolean;
  /** 标题*/
  title?: React.ReactNode | string;
  /** 是否显示右上角的关闭按钮*/
  closable?: boolean;
  /** 点击确定回调*/
  onOk?: () => void;
  /** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调*/
  onCancel?: (e: React.MouseEvent<any>) => void;
  /** 宽度*/
  width?: string | number;
  /** 底部内容*/
  footer?: React.ReactNode;
  /** 确认按钮文字*/
  okText?: string;
  /** 取消按钮文字*/
  cancelText?: string;
  /** 点击蒙层是否允许关闭*/
  maskClosable?: boolean;