How to use the @alicloud/console-components.Form.Item function in @alicloud/console-components

import React from 'react'
import { Form, Input } from '@alicloud/console-components'

const FormItem = Form.Item

const handleSubmit = e => {
  e.preventDefault() // form will auto submit if remove this line
  console.log('onsubmit')
}

const Demo9 = () => (
  <form>
    
      <input placeholder="Enter Key can also trigger ‘onSubmit’">
    
    submit
  </form>
)

export default Demo9

import React from 'react'
import { Form, Input } from '@alicloud/console-components'

const FormItem = Form.Item

function handleSubmit(v) {
  console.log(v)
}

const Demo2 = () => (
  <div>
    <form>
      
        
          <input placeholder="first" style="{{" name="first">
        
        
          <input placeholder="second" style="{{" name="second">
        
      </form></div>

Button,
  Checkbox,
  Radio,
  Select,
  Range,
  Balloon,
  DatePicker,
  TimePicker,
  NumberPicker,
  Field,
  Switch,
  Upload,
  Grid,
} from '@alicloud/console-components'

const FormItem = Form.Item
const { Option } = Select
const { RangePicker } = DatePicker
const { Row, Col } = Grid

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
}

const handleSubmit = value => {
  console.log('Form values：', value)
}

const Demo6 = () => {
  const myField = Field.useField()
  const { init } = myField

import React from 'react'
import { Form, Input, Checkbox } from '@alicloud/console-components'

const FormItem = Form.Item

const formItemLayout = {
  labelCol: {
    fixedSpan: 10,
  },
  wrapperCol: {
    span: 14,
  },
}

const handleSubmit = values => {
  console.log('Get form value:', values)
}

const Demo1 = () => (
  <form style="{{"></form>

import React from 'react'
import { Form, Input, Radio, Field } from '@alicloud/console-components'

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

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
}
const Demo11 = () => {
  const myField = Field.useField()

  const userExists = (rule, value) => {
    return new Promise((resolve, reject) => {
      if (!value) {

import React from 'react'
import { Form, Input, Select } from '@alicloud/console-components'

const FormItem = Form.Item
const { Option } = Select
const formItemLayout = {
  labelCol: { fixedSpan: 4 },
  wrapperCol: { span: 20 },
}

const Demo5 = () => {
  return (
    <div>
      <form style="{{">
        
          </form></div>

import React from 'react'
import { Form, Input, Grid } from '@alicloud/console-components'

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

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 14 },
}

const insetLayout = {
  labelCol: { fixedSpan: 3 },
}

const Demo7 = () => (
  <form>
    
      
        </form>