如何使用 NextJS 13 在 Antd 表单上触发 action prop？

Question

我最近使用 NextJS 13，我想使用服务器操作功能。为了实现这一目标，我创建了 2 个组件：

login-form-server.tsx

import { revalidatePath } from 'next/cache';
import { cookies } from 'next/headers';
import LoginFormClient from './login-form-client';
import { redirect } from 'next/navigation';

export default function LoginForm() {
  async function updateItem(data: FormData) {
    'use server';
    console.log('Success:', data);
    const response = await fetch('http://localhost:4001/users/sign-in', {
      method: 'POST',
      body: JSON.stringify(Object.fromEntries(data)),
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });
    const responseParsed = await response.json();
    console.log(responseParsed);
    cookies().set('token', responseParsed.token);
    revalidatePath('/');
    redirect('/');
  }

  return <LoginFormClient updateItem={updateItem} />;
}

和

login-form-client.tsx

：

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

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

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

  return (
    <main>
      {/* with this works ===>      <form action={updateItem}>
        <input type="text" name="email" />
        <input type="password" name="password" />
        <hr />
        <button type="submit">Update Item</button>
      </form> */}
      <Form
        action={updateItem}
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600, marginTop: 100 }}
        initialValues={{ remember: true }}
        // onFinish={onFinish}
        // onFinishFailed={onFinishFailed}
        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 }}
        ></Form.Item>

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

使用纯 html

form

这段代码可以工作。但是当我切换到 Antd Form 组件时，什么也没有发生。有人可以帮我解决这个问题吗？谢谢！

Answer 1

您可以使用

onFinish

属性来传递服务器操作，因为您的组件

LoginFormClient

已经是客户端组件，它应该完成这项工作。

<Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600, marginTop: 100 }}
        initialValues={{ remember: true }}
        onFinish={updateItem}
        autoComplete="off"
      >
    {/* form content */}
</Form>

您必须更改服务器操作来处理

onFinish

回调参数而不是 formData。