Ant Design表单：如何重置特定字段而非全部？

方法一：利用resetFields的字段数组参数 #

Ant Design的resetFields方法本身支持传入字段名数组作为参数，调用后只会重置数组内指定的字段，其余字段保持当前值。

示例代码（函数组件）：

import { Form, Button } from 'antd';
import { useForm } from 'antd/es/form/Form';

const MyForm = () => {
  const [form] = useForm();

  const handleResetSpecific = () => {
    // 仅重置name和email字段
    form.resetFields(['name', 'email']);
  };

  return (
    <Form form={form} initialValues={{ name: '', age: 18, email: '' }}>
      <Form.Item name="name" label="姓名">...</Form.Item>
      <Form.Item name="age" label="年龄">...</Form.Item>
      <Form.Item name="email" label="邮箱">...</Form.Item>
      <Button onClick={handleResetSpecific}>重置姓名和邮箱</Button>
    </Form>
  );
};

方法二：手动设置字段初始值 #

如果需要更灵活的控制（比如自定义重置后的数值，而非严格使用表单初始值），可以通过setFieldsValue手动给指定字段赋值：

1. 提前存储目标字段的初始值（或自定义重置值）
2. 调用setFieldsValue覆盖指定字段的值

示例代码：

const MyForm = () => {
  const [form] = useForm();
  // 存储需要重置的字段初始值
  const resetValues = { name: '', email: '' };

  const handleCustomReset = () => {
    form.setFieldsValue(resetValues);
  };

  return (
    <Form form={form} initialValues={{ name: '', age: 18, email: '' }}>
      {/* 表单项 */}
      <Button onClick={handleCustomReset}>重置指定字段</Button>
    </Form>
  );
};

类组件用法 #

如果是类组件，通过表单实例调用同样的方法即可：

class MyForm extends React.Component {
  handleResetSpecific = () => {
    this.props.form.resetFields(['name', 'email']);
  };

  render() {
    return (
      <Form form={this.props.form} initialValues={{ name: '', age: 18, email: '' }}>
        {/* 表单项 */}
        <Button onClick={this.handleResetSpecific}>重置指定字段</Button>
      </Form>
    );
  }
}

export default Form.create()(MyForm);

内容的提问来源于stack exchange，提问作者Lex V