How to use @alifd/next - 10 common examples

handleSubmit = (values, errors) => {
    if (errors) {
      console.log('errors', errors);
      return;
    }
    console.log('values:', values);
    Message.success('登录成功');
    // 登录成功后做对应的逻辑处理
  };

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]||'';
  }

/* eslint react/no-string-refs:0 */
import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Tab } from '@alifd/next';
import LibTable from './LibTable';
import BorrowTable from './BorrowTable';

const TabPane = Tab.Item;

const tabs = [
  { tab: '全部图书', key: '1', content:  },
  { tab: '借阅信息', key: '2', content:  },
];

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

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {};

UI: {
    version: '1.x',
    Button,
    Accordion: Collapse,
    Toast: Message,
    Upload,
    Input,
    Select,
    Icon,
    DatePicker,
    TimePicker,
    Checkbox,
    NumberPicker,
    Radio,
    RadioGroup: Radio.Group,
    TabPane: Tab.Item,
    Form,
    Tab
  },
  // 主题： dark/light,默认dark
  themeStyle: 'dark',
  // 是否展示布局组件，默认为false
  showLayoutField: true,
  // 是否展示预览按钮，默认为true
  showPreviewBtn: true,
  // 是否展示源码按钮
  showSourceCodeBtn: true,
  // 控制返回按钮点击事件
  onBackBtnClick: () => {
    alert('点击了返回')
  },
  // 额外全局按钮

success: res => {
				this.setState({
					submitDisabled: false
				});
				this.submitDisabled = false;
				if (res && res.code === 200) {
					// window.location.reload && window.location.reload();
					this.onClose();
					this.initBtn();
					typeof preSucess === "function" && preSucess(res);
				} else {
					Dialog.alert({
						content: res.code === 400 ? window.aliwareIntl.get("nacos.component.validateDialog.verification_code_error") : res.message,
						language: window.aliwareIntl.currentLanguageCode
					});
				}
			}
		}));

/* eslint no-undef:0, no-unused-expressions:0, array-callback-return:0 */
import React, { Component } from 'react';
import { Nav } from '@alifd/next';
import { withRouter, Link } from 'react-router-dom';
import { asideMenuConfig } from '../../../../menuConfig';
import './Aside.scss';

const NavItem = Nav.Item;

@withRouter
export default class BasicLayout extends Component {
  render() {
    const { location } = this.props;
    const { pathname } = location;

    return (
      <nav style="{{" direction="ver">
        {Array.isArray(asideMenuConfig) &amp;&amp;
          asideMenuConfig.length &gt; 0 &amp;&amp;</nav>

/* eslint no-undef:0, no-unused-expressions:0, array-callback-return:0 */
import React, { Component } from 'react';
import { Nav } from '@alifd/next';
import { withRouter, Link } from 'react-router-dom';
import { asideMenuConfig } from '../../../../menuConfig';
import './index.scss';

const NavItem = Nav.Item;

@withRouter
export default class BasicLayout extends Component {
  render() {
    const { location } = this.props;
    const { pathname } = location;

    return (
      <div>
        <div>LOGO</div>
        <nav>
          {Array.isArray(asideMenuConfig) &amp;&amp;
            asideMenuConfig.length &gt; 0 &amp;&amp;
            asideMenuConfig.map((nav) =&gt; {
              return (
                </nav></div>

import React from 'react';
import { Radio } from '@alifd/next';

const RadioGroup = Radio.Group;

export default function radio(p) {
  return (
     p.onChange(p.name, v)}
    >
      {(p.schema.enum || [true, false]).map((val, index) => (
        
          <span></span>

/* eslint react/no-string-refs:0 */
import React, { Component } from 'react';

import { Form, Input, Radio, Field, Message } from '@alifd/next';

import styles from './index.module.scss';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;

const formItemLayout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 16,
  },
};
const gender = [
  {
    value: 'male',
    label: 'male',
    disabled: false,
  },
  {