NextJS 13中Antd Form组件如何触发Server Action？

问题根源 #

Ant Design的Form组件并非原生HTML表单，它有独立的表单处理机制，直接给action属性赋值Server Action函数不会触发提交逻辑，必须手动对接表单的onFinish回调。

解决方案 #

通过Antd Form的onFinish获取表单数据，转换为FormData格式后调用Server Action：

• 给Antd Form添加onFinish回调函数
• 在回调中将表单值转换为FormData（匹配Server Action的参数类型）
• 调用传入的updateItem Server Action函数

修改后的客户端组件代码 #

'use client';
import { Button, Form, Input, Checkbox } from 'antd';

type Props = {
  updateItem: (data: FormData) => Promise<void>;
};
export default function LoginFormClient({ updateItem }: Props) {

  type FieldType = {
    email?: string;
    password?: string;
    remember?: boolean;
  };

  const handleFinish = async (values: FieldType) => {
    // 转换Antd表单值为FormData
    const formData = new FormData();
    formData.append('email', values.email || '');
    formData.append('password', values.password || '');
    formData.append('remember', values.remember?.toString() || 'false');
    
    // 执行Server Action
    await updateItem(formData);
  };

  return (
    <main>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600, marginTop: 100 }}
        initialValues={{ remember: true }}
        onFinish={handleFinish}
        autoComplete="off"
      >
        <Form.Item<FieldType>
          label="Email"
          name="email"
          rules={[{ required: true, message: 'Please input your email!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label="Password"
          name="password"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item<FieldType>
          name="remember"
          valuePropName="checked"
          wrapperCol={{ offset: 8, span: 16 }}
        >
          <Checkbox>Remember me</Checkbox>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </main>
  );
}

额外说明 #

• 原代码中remember字段缺少实际的Checkbox控件，导致无法获取该字段值，已补充完整。
• Server端的updateItem函数无需修改，它已经能正确处理FormData类型参数。

内容的提问来源于stack exchange，提问作者Ali Briceño