《PC端UI框架》Ant Design V4 中获取表单实例

React组件形式与函数组件形式的表单实现

最新推荐文章于 2021-09-07 22:58:18 发布

原创最新推荐文章于 2021-09-07 22:58:18 发布 · 684 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#UI框架

UI 库专栏收录该内容

9 篇文章

订阅专栏

这篇博客对比了在React中使用类组件和函数式组件两种方式来创建表单，详细展示了如何利用Ant Design库创建并提交表单。在类组件中，通过`React.createRef()`获取表单实例，而在函数组件中则利用`Form.useForm()`获取表单上下文。

                    
                        
                    
                    类组件：import React from 'react'
import { Form, Input, Button } from 'antd';

class ClassForm extends React.Component {
  // 创建表单实例
  formRef = React.createRef()

  handleSave = () => {
    this.formRef.current.submit()
  }

  render(){
    return (
      <Form ref={this.formRef}>
        <Form.Item name="title">
        	<Input />
        </Form.Item>
        <Form.Item>
           <Button type="primary" onClick={this.handleSave}> 保存</Button>
        </Form.Item>
        </Form>
    )
  }
}

export default ClassForm

函数式组件：import { Form, Input, Button } from 'antd';

const FuncForm = () => {
  const [form] = Form.useForm();

  const handleSave =  () => {
    form.submit()
  }
  return (
    <Form form={form} >
      <Form.Item name="title">
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" onClick={handleSave}> 保存</Button>
      </Form.Item>
    </Form>
  )
}

export default FuncForm




                