<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 My
Form() {
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 My
Form() {
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]
本文详细解析了表单提交中的两种方式：onclick与onsubmit的区别，包括它们的触发机制、返回值对表单提交的影响，以及在实际开发中的应用场景。
扫一扫
142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
