How to use the choerodon-ui.Form.Item function in choerodon-ui

import React, { Component } from 'react';
import {
  Form, Input, Select, Modal, Spin, DatePicker, 
} from 'choerodon-ui';
import { Content, stores } from '@choerodon/master';
import moment from 'moment';
import { getProjectVersion } from '../../../../api/agileApi';
import { editFolder } from '../../../../api/cycleApi';

const { Option } = Select;
const { AppState } = stores;
const FormItem = Form.Item;
const { Sidebar } = Modal;

class EditCycle extends Component {
  state = {
    versions: [],
    selectLoading: false,
    loading: false,
  }

  componentWillReceiveProps(nextProps) {
    const { setFieldsValue } = this.props.form;
    if (this.props.visible === false && nextProps.visible === true) {
      const {
        versionId,
        title,
        description,

/**
 * Created by hulingfangzi on 2018/6/20.
 */
import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Button, Form, Select, Table, Tooltip } from 'choerodon-ui';
import { injectIntl, FormattedMessage } from 'react-intl';
import { withRouter } from 'react-router-dom';
import { axios, Content, Header, Page, Permission } from 'choerodon-boot-combine';
import querystring from 'query-string';
import InstanceStore from '../../../stores/global/instance';
import MouseOverWrapper from '../../../components/mouseOverWrapper';
import { handleFiltersParams } from '../../../common/util';

const FormItem = Form.Item;
const { Option } = Select;
const intlPrefix = 'global.instance';

@Form.create({})
@withRouter
@injectIntl
@inject('AppState')
@observer
export default class Instance extends Component {
  state = this.getInitState();

  getInitState() {
    return {
      pagination: {
        current: 1,
        pageSize: 10,

import React, { Component } from 'react';
import { Form, Icon, Input } from 'choerodon-ui';
import { inject, observer } from 'mobx-react';
import { FormattedMessage, injectIntl } from 'react-intl';
import { findDOMNode } from 'react-dom';
import './PhoneWrapper.scss';

const FormItem = Form.Item;
const intlPrefix = 'user.userinfo';

@Form.create({})
@injectIntl
@inject('AppState')
@observer
export default class PhoneWrapper extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editing: false,
      internationalCode: null,
      phone: null,
      submitting: false,
    };
  }

import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Button, Select, Form, Input, Popover, Icon } from 'choerodon-ui';
import { injectIntl, FormattedMessage } from 'react-intl';
import { withRouter } from 'react-router-dom';
import { axios, Content, Header, Page } from '@choerodon/boot';
import InmailTemplateStore from '../../../stores/global/inmail-template';
import './InMailTemplate.scss';
import Editor from '../../../components/editor';

const FormItem = Form.Item;
const Option = Select.Option;

class MailTemplateType {
  constructor(context) {
    this.context = context;
    const { AppState } = this.context.props;
    this.data = AppState.currentMenuType;
    const { type, id, name } = this.data;
    const codePrefix = type === 'organization' ? 'organization' : 'global';
    this.code = `${codePrefix}.inmailtemplate`;
    this.values = { name: name || 'Choerodon' };
    this.type = type;
    this.orgId = id;
    this.orgName = name;
  }
}

import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Button, Form, Input } from 'choerodon-ui';
import { injectIntl, FormattedMessage } from 'react-intl';
import { Content, Header, Page, Permission, stores } from '@choerodon/boot';
import '../../../main.scss';
import './AppReleaseEdit.scss';

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 100 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 26 },
  },
};
const { TextArea } = Input;
const { AppState } = stores;

@observer
class AppReleaseEdit extends Component {
  constructor(props) {

import { Modal, Form, Select, Tooltip } from 'choerodon-ui';
import { stores, Content } from 'choerodon-front-boot';
import { injectIntl, FormattedMessage } from 'react-intl';
import _ from 'lodash';
import '../../../main.scss';
import '../branchCreate/BranchCreate.scss';
import '../index.scss';
import MouserOverWrapper from '../../../../components/MouseOverWrapper';
import DevPipelineStore from '../../../../stores/project/devPipeline';
import DevConsoleStore from '../../../../stores/project/devConsole';
import InterceptMask from "../../../../components/interceptMask/InterceptMask";

const { AppState } = stores;
const Sidebar = Modal.Sidebar;
const { Option } = Select;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 100 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 26 },
  },
};
@observer
class BranchEdit extends Component {
  constructor(props) {
    const menu = AppState.currentMenuType;
    super(props);
    this.state = {

import React, { Component } from 'react';
import { stores, axios, Content } from '@choerodon/boot';
import _ from 'lodash';
import {
  Modal, Form, Input, Checkbox, 
} from 'choerodon-ui';

import './CopyIssue.scss';

const { AppState } = stores;
const FormItem = Form.Item;

class CopyIssue extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
    };
  }

  componentDidMount() {
    setTimeout(() => {
      this.textInput.focus();
    });
  }
  
  handleCopyIssue = () => {

import React, { Component } from 'react';
import { stores, axios, Content } from 'choerodon-front-boot';
import _ from 'lodash';
import { Modal, Form, Select } from 'choerodon-ui';
import { createLink, loadIssuesInLink } from '../../api/NewIssueApi';
import TypeTag from '../TypeTag';

import './ChangeParent.scss';

const { AppState } = stores;
const FormItem = Form.Item;
const { Option } = Select;
let sign = false;

class ChangeParent extends Component {
  debounceFilterIssues = _.debounce((input) => {
    const { issueId } = this.props;
    this.setState({ selectLoading: true });
    loadIssuesInLink(0, 20, issueId, input).then((res) => {
      this.setState({
        originIssues: res.content,
        selectLoading: false,
      });
    });
  }, 500);

  constructor(props) {

import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { injectIntl, FormattedMessage } from 'react-intl';
import { Button, Input, Form, Modal } from 'choerodon-ui';
import { stores } from 'choerodon-front-boot';
import './EnvPipeLineHome.scss';
import _ from 'lodash';

const FormItem = Form.Item;
const { AppState } = stores;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

@observer
class EnvGroup extends Component {
  constructor(props, context) {

Form, Button, Input, Divider, Select, TimePicker, Spin,
  DatePicker, InputNumber, Checkbox, message,
} from 'choerodon-ui';
import { injectIntl, FormattedMessage } from 'react-intl';
import {
  Content, Header, Page, stores,
} from '@choerodon/boot';
import _ from 'lodash';
import moment from 'moment';
import UserHead from '../../../components/UserHead';
import { randomString } from '../../../common/utils';
import './ObjectSchemeField.scss';
import DragList from '../Components/DragList';

const { AppState } = stores;
const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;
const singleList = ['radio', 'single'];
const multipleList = ['checkbox', 'multiple'];
const dateList = ['time', 'datetime', 'date'];
const textList = ['input', 'text', 'url'];
const dateFormat = 'YYYY-MM-DD HH:mm:ss';


let sign = false;

@observer
class ObjectSchemeField extends Component {
  debounceFilterUsers = _.debounce((input) => {
    const { ObjectSchemeStore } = this.props;
    this.setState({ selectLoading: true });