antd form component

1. 两个属性

• destroyOnClose关闭弹框后，清空之前写的内容
• maskClosable 点击弹框外部的阴影，是否关闭弹框

  
    ...
  

2. Input 正则输入

 
       {getFieldDecorator('name', { initialValue: defaults.name || '', rules: [{ required: true, message: '必填,仅支持英文及数字和下划线_', pattern: /^[A-Za-z0-9\\_]+$/ }] })()}
  

antd form component 完整示例

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Modal, Form, Input, TreeSelect, InputNumber } from 'antd';

const FormItem = Form.Item;

class TaskTypeForm extends Component {
  static propTypes = {
    defaults: PropTypes.shape(),
    loading: PropTypes.bool,
    visible: PropTypes.bool,
    error: PropTypes.string,
    submit: PropTypes.func,
    closeModal: PropTypes.func,
    infoOptions: PropTypes.arrayOf(PropTypes.shape()),
    roleOptions: PropTypes.arrayOf(PropTypes.shape()),
  };

  constructor(props) {
    super(props);
    this.submit = this.submit.bind(this);
  }

  submit() {
    const defaults = this.props.defaults;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const command = {
          id: defaults.id,
          name: values.name,
          expireDays: values.expireDays,
          infoOptionIds: values.infoOptionIds ? values.infoOptionIds.join(',') : '',
        };
        this.props.submit(command);
      }
    });
  }

  render() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 14 },
      },
    };
    const { getFieldDecorator } = this.props.form;
    const {  error, visible, closeModal, infoOptions } = this.props;
    const defaults = this.props.defaults;
    const infoOptionVal = defaults.infoOptionIds ? defaults.infoOptionIds.split(',') : [];
    return (
       closeModal(defaults)} destroyOnClose maskClosable={false}>
      

            
             {getFieldDecorator('name', { initialValue: defaults.name || '', rules: [{ required: true, message: '必填,仅支持英文及数字和下划线_', pattern: /^[A-Za-z0-9\\_]+$/ }] })()}
            
            
              {getFieldDecorator('infoOptionIds', { initialValue: infoOptionVal, rules: [{ required: true, message: '信息权限 必填' }] })(
                )}
            
            
              {getFieldDecorator('expireDays', { initialValue: defaults.expireDays, rules: [{ required: true, message: '案件有效期 必填' }] })()}
            
            {error && 
{error}
}
          
      
    );
  }
}


const Wrapped = Form.create()(TaskTypeForm);
export default Wrapped;