semi design 的form表单重置和提交事件用react

<think>我们正在使用Semi Design的Form组件，需要实现表单重置和提交事件。 根据Semi Design文档，我们可以使用Form的`onSubmit`事件来处理提交，使用`resetFields`方法来重置表单。 步骤： 1. 创建表单引用（ref）以便访问表单实例，从而调用重置方法。 2. 绑定提交事件处理函数，在提交时执行自定义逻辑（如验证、提交数据等）。 3. 在重置按钮的点击事件中，通过表单引用调用`resetFields`方法。 示例代码： 我们将创建一个简单的表单，包含一个输入框和一个提交按钮、一个重置按钮。 注意：Semi Design的Form组件分为两种使用方式：受控和非受控。我们这里使用非受控方式，通过ref操作。 首先，确保已经安装了Semi Design： ```bash npm install @douyinfe/semi-ui ``` 然后，在React组件中：</think>在 React 中使用 Semi Design 实现表单重置和提交事件，可以通过以下步骤实现： ### 1. 表单重置实现 使用 `Form` 的 `resetFields()` 方法重置表单值，需要结合 `ref` 获取表单实例： ```jsx import React, { useRef } from 'react'; import { Form, Button } from '@douyinfe/semi-ui'; function MyForm() { const formRef = useRef(); const handleReset = () => { formRef.current.resetFields(); // 重置所有字段 }; return ( <Form ref={formRef}> <Form.Input field="name" label="姓名" /> <Form.Input field="email" label="邮箱" /> <Button onClick={handleReset}>重置表单</Button> </Form> ); } ``` ### 2. 表单提交实现 使用 `onSubmit` 属性处理提交事件，通过 `values` 参数获取表单数据： ```jsx function MyForm() { const handleSubmit = (values) => { console.log('提交数据:', values); // 发送API请求等操作 }; return ( <Form onSubmit={handleSubmit}> <Form.Input field="username" label="用户名" rules={[{ required: true, message: '必填项' }]} /> <Button htmlType="submit" type="primary">提交</Button> </Form> ); } ``` ### 3. 完整示例（重置+提交） ```jsx import React, { useRef } from 'react'; import { Form, Button, Toast } from '@douyinfe/semi-ui'; export default function App() { const formRef = useRef(); const handleSubmit = (values) => { Toast.success('提交成功'); console.log('表单数据:', values); // 实际开发中此处调用API }; const handleReset = () => { formRef.current.resetFields(); Toast.warning('已重置表单'); }; return ( <Form ref={formRef} onSubmit={handleSubmit} style={{ width: 400 }}> <Form.Input field="name" label="姓名" placeholder="请输入姓名" rules={[{ required: true, message: '姓名不能为空' }]} /> <Form.Input field="email" label="邮箱" placeholder="请输入邮箱" rules={[ { required: true, message: '邮箱不能为空' }, { type: 'email', message: '邮箱格式不正确' } ]} /> <div style={{ display: 'flex', gap: 10, marginTop: 20 }}> <Button htmlType="submit" type="primary">提交表单</Button> <Button onClick={handleReset} type="secondary">重置表单</Button> </div> </Form> ); } ``` ### 关键API说明： 1. **`resetFields(fields?: string[])`** - 不传参数：重置所有字段 - 传入字段名数组：重置指定字段 `formRef.current.resetFields(['name'])` 2. **`onSubmit(values, errors)`** - `values`：表单数据对象 - `errors`：验证错误信息（提交时自动触发验证） 3. **表单验证**： - 在 `rules` 属性中定义验证规则 - 提交时自动触发验证，可通过 `errors` 参数获取错误信息 ### 注意事项： 1. 需要 React 16.8+ 版本（因使用 Hooks） 2. 重置操作不会触发表单验证 3. 使用 `htmlType="submit"` 确保按钮触发表单提交 4. 可通过 `formRef.current.getValues()` 手动获取表单值 > Semi Design 表单文档参考：[Form 组件文档](https://semi.design/zh-CN/input/form)[^1]