React 项目中使用AntDesign框架时处理同一个页面使用多个Form表单的问题

最新推荐文章于 2024-07-26 17:02:42 发布

前端小小白的爬坑之路

最新推荐文章于 2024-07-26 17:02:42 发布

阅读量2.2w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： React.js 文章标签： React AntDesign Form

本文链接：https://blog.youkuaiyun.com/a895104045/article/details/88943537

在React应用中，使用AntDesign框架时，若一个页面包含多个Form表单，直接渲染会导致提交一个表单时其他表单一同提交。为解决此问题，可以采用函数式组件方式，为每个Form返回单独的组件实例，确保它们在提交时互不影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React 项目中同一个页面使用多个Form表单，如果直接在Render中使用多个Forn，在提交某一个表单时会同时触发其他表单的提交事件，因此可以使用函数式的方法return出Form组件，然后再Render中引用，从而使页面上的Form相互独立

代码如下： 

import React, { Component } from 'react';

import { Form, Button, Input} from 'antd';

const FormItem = Form.Item;

class UserSetting extends Component { 

    CreateFormManFun=()=>{

    // 创建Form表单

    const CreateFormMan = Form.create()(props => {

         const { dispatch,form} = props;

         const { getFieldDecorator } = form;

         // 提交事件

         const searchMan = () => {

               const {dispatch}=this.props;

               form.validateFields((err, fieldsValue) => {

                   if (err) return;

    &nb