Ant Design React如何实现类setFieldError的手动设置表单字段错误

你找的setFieldError类能力没有直接暴露在hook返回值里，Antd 把相关方法挂在Form实例上，用setFields就能实现需求，步骤如下：

• 首先创建Form实例并绑定到组件
  调用Form.useForm()生成实例，传给Form组件的form属性，后续所有表单操作都通过这个实例调用：

  import { Form, Input, Button } from 'antd';
  
  const RegisterForm = () => {
    const [form] = Form.useForm();
  
    const handleSubmit = async (values) => {
      // 替换成你的接口校验逻辑：判断邮箱是否已被注册
      const isDuplicateEmail = await checkEmailExist(values.email);
      if (isDuplicateEmail) {
        // 手动给email字段加错误状态
        form.setFields([
          {
            name: 'email', // 必须和对应Form.Item的name值完全一致
            errors: ['该邮箱已完成注册，请直接登录或更换邮箱'],
            // 要显示警告状态就传warnings字段，样式为黄色提示
            // warnings: ['当前邮箱已注册，提交后将关联已有账号']
          }
        ]);
        return;
      }
      // 正常提交流程
    };
  
    return (
      <Form form={form} onFinish={handleSubmit}>
        <Form.Item
          label="邮箱"
          name="email"
          rules={[{ required: true, type: 'email', message: '请输入有效邮箱' }]}
        >
          <Input placeholder="请输入注册邮箱" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">提交注册</Button>
        </Form.Item>
      </Form>
    );
  };
  
  export default RegisterForm;
  

• 几个实用提示：
  • 用setFields设置的错误和原生表单校验逻辑完全打通，会自动显示错误样式、拦截提交，不需要自己写DOM控制样式
  • 要显示警告样式（黄色边框+提示）时，除了传warnings字段，记得不要给Form.Item硬编码validateStatus="error"，必要时可以结合受控属性调整状态优先级
  • 用户修改对应字段内容后，手动设置的错误/警告会在下次校验时自动清除，不需要额外写重置逻辑

实现效果参考：
邮箱已注册错误提示效果示意图

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