How to use the @alifd/next.Field function in @alifd/next

constructor(props) {
    super(props);
    this.state = {
      showmore: false,
    };
    this.edasAppName = getParams('edasAppName');
    this.edasAppId = getParams('edasAppId');
    this.inApp = this.edasAppName;
    this.field = new Field(this);
    this.dataId = getParams('dataId') || 'yanlin';
    this.group = getParams('group') || 'DEFAULT_GROUP';
    this.serverId = getParams('serverId') || 'center';
    this.nid = getParams('nid') || '123509854';
    this.tenant = getParams('namespace') || ''; // 为当前实例保存tenant参数
    // this.params = window.location.hash.split('?')[1]||'';
    this.typeMap = {
      U: aliwareIntl.get('com.alibaba.nacos.page.historyDetail.update'),
      I: aliwareIntl.get('com.alibaba.nacos.page.historyDetail.insert'),
      D: aliwareIntl.get('com.alibaba.nacos.page.historyDetail.delete'),
    };
  }

constructor(props) {
    super(props);
    this.state = {
      loading: false,
      showmore: false,
      activeKey: 'normal',
      hasbeta: false,
      ips: '',
      checkedBeta: false,
      switchEncrypt: false,
      tag: [
        { title: aliwareIntl.get('com.alibaba.nacos.page.configdetail.official'), key: 'normal' },
      ],
    };
    this.field = new Field(this);
    this.dataId = getParams('dataId') || 'yanlin';
    this.group = getParams('group') || 'DEFAULT_GROUP';
    this.ips = '';
    this.valueMap = {}; // 存储不同版本的数据
    this.tenant = getParams('namespace') || '';
    this.searchDataId = getParams('searchDataId') || '';
    this.searchGroup = getParams('searchGroup') || '';
    // this.params = window.location.hash.split('?')[1]||'';
  }

constructor(props) {
        super(props);
        this.state = {
            loading: false,
            showmore: false,
            activeKey: 'normal',
            hasbeta: false,
            ips: '',
            checkedBeta: false,
            switchEncrypt: false,
            tag: [{ title: aliwareIntl.get('com.alibaba.cspupcloud.page.configdetail.official'), key: 'normal' }]
        };
        this.field = new Field(this);
        this.dataId = getParams('dataId') || 'yanlin';
        this.group = getParams('group') || 'DEFAULT_GROUP';
        this.ips = '';
        this.valueMap = {}; //存储不同版本的数据
        this.tenant = getParams('namespace') || '';
        this.appName = getParams('appName') || getParams('edasAppId') || '';
        this.edasAppId = getParams('edasAppId') || '';
        //this.params = window.location.hash.split('?')[1]||'';	
    }

};
const gender = [
  {
    value: 'male',
    label: 'male',
    disabled: false,
  },
  {
    value: 'female',
    label: 'female',
    disabled: false,
  },
];

export default class FormCard extends Component {
  field = new Field(this);
  invalidName = {};

  userExists(rule, value) {
    return new Promise((resolve, reject) => {
      if (!value) {
        resolve();
      } else {
        setTimeout(() => {
          if (value === 'frank') {
            reject([new Error('抱歉，用户名已被占用.')]);
          } else {
            resolve();
          }
        }, 500);
      }
    });

constructor(props) {
    super(props);
    this.deleteDialog = React.createRef();
    this.showcode = React.createRef();
    this.field = new Field(this);
    this.appName = getParams('appName') || getParams('edasAppId') || '';
    this.preAppName = this.appName;
    this.group = getParams('group') || '';
    this.preGroup = this.group;
    this.dataId = getParams('dataId') || '';
    this.preDataId = this.dataId;
    this.serverId = getParams('serverId') || 'center';
    this.edasAppId = getParams('edasAppId') || '';
    this.edasAppName = getParams('edasAppName') || '';
    this.inApp = this.edasAppId;
    this.state = {
      value: '',
      visible: false,
      total: 0,
      pageSize: 10,
      currentPage: 1,

constructor(props) {
        super(props);

        this.field = new Field(this);
        this.appName = getParams('appName') || '';
        this.preAppName = this.appName;
        this.group = getParams('group') || '';
        this.preGroup = this.group;

        this.dataId = getParams('dataId') || '';
        this.preDataId = this.dataId;
        this.serverId = getParams('serverId') || '';
        this.state = {
            ipDialog: {
                visible: false,
                unitIps: []
            },
            value: "",
            visible: false,
            total: 0,

constructor(props) {
        super(props);

        this.field = new Field(this);
        this.appName = getParams('appName') || '';
        this.preAppName = this.appName;
        this.group = getParams('group') || 'DEFAULT_GROUP';
        this.preGroup = this.group;

        this.dataId = getParams('dataId') || '';
        this.preDataId = this.dataId;
        this.serverId = getParams('serverId') || 'center';
        this.state = {
            value: "",
            visible: false,
            total: 0,
            pageSize: 10,
            currentPage: 1,
            dataSource: [],
            fieldValue: [],

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

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