How to use the @uform/react.registerFormField function in @uform/react

: val
  if (isArr(result)) {
    result = result.map(item => ({
      ...item,
      // 必须要有一个不重复的uid
      uid:
        item.uid ||
        Math.random()
          .toFixed(16)
          .slice(2, 10)
    }))
  }
  return result
}

registerFormField(
  'upload',
  connect({
    getProps: mapStyledProps
  })(
    class Uploader extends React.Component {
      static defaultProps = {
        action: 'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload',
        listType: 'text',
        multiple: true,
        className: 'antd-uploader'
      }

      constructor(props) {
        super(props)
        this.state = {
          value: shallowClone(toArr(props.value))

import { connect, registerFormField } from '@uform/react'
import { Checkbox } from 'antd'
import {
  transformDataSourceKey,
  mapStyledProps,
  mapTextComponent
} from '../utils'

const { Group: CheckboxGroup } = Checkbox

registerFormField(
  'checkbox',
  connect({
    getProps: mapStyledProps,
    getComponent: mapTextComponent
  })(transformDataSourceKey(CheckboxGroup, 'options'))
)

registerFormField(
  'month',
  connect({
    getValueFromEvent(_, value) {
      return transformMoment(value)
    },
    getProps: compose(
      mapStyledProps,
      mapMomentValue
    ),
    getComponent: mapTextComponent
  })(MonthPicker)
)

registerFormField(
  'week',
  connect({
    getValueFromEvent(_, value) {
      return transformMoment(value, 'gggg-wo')
    },
    getProps: compose(
      mapStyledProps,
      props => {
        if (isStr(props.value) && props.value) {
          const parsed = props.value.match(/\D*(\d+)\D*(\d+)\D*/) || [
            '',
            '',
            ''
          ]
          props.value = moment(parsed[1], 'YYYY').add(parsed[2] - 1, 'weeks')
        }

import React from 'react'
import { connect, registerFormField } from '@uform/react'
import { Slider } from 'antd'
import { mapStyledProps } from '../utils'

registerFormField(
  'range',
  connect({
    defaultProps: {
      style: {
        width: 320
      }
    },
    getProps: mapStyledProps
  })(
    class Component extends React.Component {
      render() {
        const { onChange, value, min, max, marks } = this.props
        let newMarks = {}
        if (Array.isArray(marks)) {
          marks.forEach(mark => {
            newMarks[mark] = mark

import { connect, registerFormField } from '@uform/react'
import { Radio } from 'antd'
import {
  transformDataSourceKey,
  mapStyledProps,
  mapTextComponent
} from '../utils'

const { Group: RadioGroup } = Radio

registerFormField(
  'radio',
  connect({
    getProps: mapStyledProps,
    getComponent: mapTextComponent
  })(transformDataSourceKey(RadioGroup, 'options'))
)

import { connect, registerFormField } from '@uform/react'
import { acceptEnum, mapStyledProps } from '../utils'
import { Switch } from 'antd'

registerFormField(
  'boolean',
  connect({
    valueName: 'checked',
    getProps: mapStyledProps
  })(acceptEnum(Switch))
)

css`
      display: inline-block;
      width: auto;
    `}
`

export const ArrayField = createArrayField({
  CircleButton,
  TextButton,
  AddIcon: () => ,
  RemoveIcon: () => ,
  MoveDownIcon: () => ,
  MoveUpIcon: () => 
})

registerFormField(
  'array',
  styled(
    class extends ArrayField {
      public render() {
        const { className, name, value, renderField } = this.props
        const cls = this.getProps('className')
        const style = this.getProps('style')
        return (
          <div style="{style}">
            {value.map((item, index) =&gt; {
              return (
                <div></div></div>

}
    .div-4 {
      left: 80%;
    }
    .password-strength-bar {
      position: relative;
      background-image: -webkit-linear-gradient(left, #ff5500, #ff9300);
      transition: all 0.35s ease-in-out;
      height: 8px;
      width: 100%;
      margin-top: 5px;
    }
  }
`

registerFormField('password', connect()(Password))

import { connect, registerFormField } from '@uform/react'
import { Rate } from 'antd'
import { mapStyledProps } from '../utils'

registerFormField(
  'rating',
  connect({
    getProps: mapStyledProps
  })(Rate)
)

const props = this.props || {}
      const format = props.showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'
      return [
        transformMoment(startDate, format),
        transformMoment(endDate, format)
      ]
    },
    getProps: compose(
      mapStyledProps,
      mapMomentValue
    ),
    getComponent: mapTextComponent
  })(RangePicker)
)

registerFormField(
  'month',
  connect({
    getValueFromEvent(_, value) {
      return transformMoment(value)
    },
    getProps: compose(
      mapStyledProps,
      mapMomentValue
    ),
    getComponent: mapTextComponent
  })(MonthPicker)
)

registerFormField(
  'week',
  connect({