react+antd实现tabs内容显示form表单，各个tabs的form表单相互独立

在React中配合Ant Design（antd）实现各个Tabs中的Form表单相互独立，可以遵循以下步骤： 1. 首先，确保已经安装了antd库。如果尚未安装，可以通过npm或yarn进行安装： ```bash npm install antd --save # 或者 yarn add antd ``` 2. 在React组件中引入必要的antd组件，比如Tabs和Form组件。 3. 创建Tabs组件，并为每个Tab设置一个唯一的key值，同时为每个Tab关联一个独立的Form表单组件。 4. 对于每个Form表单，可以通过给Form组件的`form`属性传递一个新的`Form.create()`创建的包装过的组件来实现表单的独立性。 5. 在每个独立的Form表单组件中，使用Form.Item来包裹各个表单项，并设置对应的表单项属性（如name, rules等）。 6. 使用Form.useForm()创建一个表单实例，这个实例会为每个独立的Form提供管理状态的能力，例如表单数据、校验状态等。 下面是一个简化的代码示例： ```jsx import React from 'react'; import { Tabs, Form, Input, Button } from 'antd'; const { TabPane } = Tabs; const { useForm } = Form; function MyForm({ onfinish }) { const [form] = useForm(); const onFinish = (values) => { onfinish(values); }; return ( <Form form={form} onFinish={onFinish}> <Form.Item name="username" rules={[{ required: true, message: '请输入用户名!' }]}> <Input placeholder="用户名" /> </Form.Item> <Form.Item name="password" rules={[{ required: true, message: '请输入密码!' }]}> <Input.Password placeholder="密码" /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> 提交 </Button> </Form.Item> </Form> ); } function TabsWithForms() { const handleFinish = (values) => { console.log('Form values:', values); }; return ( <Tabs defaultActiveKey="1"> <TabPane tab="Tab 1" key="1"> <MyForm onfinish={handleFinish} /> </TabPane> <TabPane tab="Tab 2" key="2"> <MyForm onfinish={handleFinish} /> </TabPane> {/* 其他Tab页 */} </Tabs> ); } export default TabsWithForms; ``` 在这个示例中，每个Tab页都有一个独立的`MyForm`组件实例，而`MyForm`组件内部使用`useForm`钩子创建了表单实例，这样就保证了每个表单的数据和状态是相互独立的。