How to use the @alifd/next.Form.Item function in @alifd/next

import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Input, Button, Select, Checkbox, Form, NumberPicker, SplitButton } from '@alifd/next';

const CheckboxGroup = Checkbox.Group;
const FormItem = Form.Item;

const formItemLayout = {
  labelCol: { xxs: 8, s: 3, l: 3 },
  wrapperCol: { s: 12, l: 10 }
};

export default class GroupedForm extends Component {
  static displayName = 'GroupedForm';

  reset = () => {
  }

  formChange = (values, field) => {
    console.log(values, field)
  }

import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Input, Select, Grid, Form } from '@alifd/next';

const { Row, Col } = Grid;
const FormItem = Form.Item;

const formItemLayout = {
  labelCol: { xxs: 8, s: 6, l: 4 },
  wrapperCol: { s: 12, l: 12 },
};

export default class ColumnForm extends Component {
  static displayName = 'ColumnForm';

  onFormChange = (values, field) => {
    console.log(values, field);
  };

  reset = () => {};

  submit = (values, errors) => {

* You may obtain a copy of the License at
 *      http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import { request } from '../../globalLib';
import { Button, ConfigProvider, Dialog, Field, Form, Input, Loading } from '@alifd/next';

import './index.scss';

const FormItem = Form.Item;

@ConfigProvider.config
class EditorNameSpace extends React.Component {
  static displayName = 'EditorNameSpace';

  constructor(props) {
    super(props);
    this.state = {
      dialogvisible: false,
      loading: false,
    };
    this.field = new Field(this);
  }

  openDialog(record) {
    this.getNamespaceDetail(record);

import React, { Component } from 'react';
import { Dialog, Button, Form, Input, Field } from '@alifd/next';

const FormItem = Form.Item;

export default class EditDialog extends Component {
  static displayName = 'EditDialog';

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      dataIndex: null,
    };
    this.field = new Field(this);
  }

  handleSubmit = () => {

import React from 'react'
import {connect} from 'react-redux'
import {Table, Pagination, Form, Input, Button, Dialog, Message, ConfigProvider} from '@alifd/next'
import FuncHead from '../../components/FuncHead'
import AddSyncDialog from './AddSyncDialog'
import {list, update} from '../../reducers/task'
import './index.scss'

const FormItem = Form.Item

@connect(state => ({...state.task}), {list})
@ConfigProvider.config
class ServiceSync extends React.Component {
    constructor(props) {
        super(props)
        this.addDialog = React.createRef()
        this.state = {
            pageNum: 1,
            loading: true,
            search: {
                serviceName: ''
            }
        }
    }

* you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *      http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import './index.scss';
import { getParams, request, aliwareIntl } from '../../globalLib';
import { Button, Dialog, Field, Form, Select } from '@alifd/next';

const FormItem = Form.Item;
const { AutoComplete: Combobox } = Select;

class CloneDialog extends React.Component {
  constructor(props) {
    super(props);
    this.allPolicy = [
      {
        value: 'abort',
        label: aliwareIntl.get('nacos.component.CloneDialog.Terminate_the_clone0'),
      },
      { value: 'skip', label: aliwareIntl.get('nacos.component.CloneDialog.skip') },
      { value: 'overwrite', label: aliwareIntl.get('nacos.component.CloneDialog.cover') },
    ];
    this.defaultPolicy = 'abort';
    this.state = {
      visible: false,