antd表单远程提交

Question

我想在antd表单之外触发提交按钮

这是我的代码

<Form
          {...layout}
          name="basic"
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >

     <Form.Item
        label="Username"
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </Form.Item>
    
    <Form.Item {...tailLayout}>
           // Submit button here works well
          </Form.Item>
</Form>

我想要这个外部表单标签，请建议

 <Button type="primary" htmlType="submit">
     Submit
 </Button>

Answer 1

你可以尝试这样的方法：

 const [form] = Form.useForm();

  const handleFinish = (values) => {
    console.log("values: ", values);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <MyForm form={form} onFinish={handleFinish} />
      <Button onClick={() => form.submit()}>Submit</Button>
    </div>
  );

export const MyForm = ({ form, onFinish }) => {
  return (
    <Form
      form={form}
      onFinish={onFinish}
      initialValues={{ username: "John Doe" }}
    >
      <Form.Item name="username">
        <Input />
      </Form.Item>
    </Form>
  );
};