antd form component

1. 两个属性

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

  <Modal title="弹框" visible okText="确定" cancelText="取消" destroyOnClose maskClosable={false}>
    ...
  </Modal>

2. Input 正则输入

 <FormItem {...formItemLayout} label="案件标签">
       {getFieldDecorator('name', { initialValue: defaults.name || '', rules: [{ required: true, message: '必填,仅支持英文及数字和下划线_', pattern: /^[A-Za-z0-9\\_]+$/ }] })(<Input />)}
  </FormItem>

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 (
      <Modal title={`${defaults.id ? '编辑' : '添加'}案件标签`} visible={visible} onOk={this.submit} okText="确定" cancelText="取消" onCancel={() => closeModal(defaults)} destroyOnClose maskClosable={false}>
      <Form>
            <FormItem {...formItemLayout} label="案件标签">
             {getFieldDecorator('name', { initialValue: defaults.name || '', rules: [{ required: true, message: '必填,仅支持英文及数字和下划线_', pattern: /^[A-Za-z0-9\\_]+$/ }] })(<Input />)}
            </FormItem>
            <FormItem {...formItemLayout} label="信息权限">
              {getFieldDecorator('infoOptionIds', { initialValue: infoOptionVal, rules: [{ required: true, message: '信息权限 必填' }] })(
                <TreeSelect multiple treeData={infoOptions} />)}
            </FormItem>
            <FormItem {...formItemLayout} label="案件有效期">
              {getFieldDecorator('expireDays', { initialValue: defaults.expireDays, rules: [{ required: true, message: '案件有效期 必填' }] })(<InputNumber min={0} style={{ width: 284 }} />)}
            </FormItem>
            {error && <div className="ant-row ant-form-item has-error"><div className="ant-col-xs-offset-6 ant-col-xs-18 ant-form-explain">{error}</div></div>}
          </Form>
      </Modal>
    );
  }
}


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