react hooks antdesign 写表单页面的几个问题

Question

`

import React, {useState} from 'react';
import { Form, Input, Button, Select } from 'antd';

const App = props => {
  const formItemLayout = { labelCol: { span: 4 }, wrapperCol: { span: 6 } };
  
  const handleSubmit = (e) => {

  }


  return (
    <Form onSubmit={handleSubmit} {...formItemLayout} autoComplete="off">
      <Form.Item label = {'名称'}>
        {getFieldDecorator('name',
          {
            rules: [{
              required: true,
              message: '名称',
              max: 20
          }],
        })(
          <Input autoComplete="off" placeholder="名称" />
          )
        }
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  )
}

 
export default App;

`
ant design 3.X版本 升不了4.X
这种写法getFieldDecorator 和 validateFields 怎么声明使用?
还是有其他办法?

Answer 1

import React, {useRef} from 'react'

const app = props => {
    const formRef = useRef()
    
    const submitFn = () => {
        formRef.current.validateFields()
    }
    
    return (
        <Form ref={formRef}>...</Form>
    )
}