0
votes

Soumission à distance du formulaire Antd

Je souhaite déclencher le bouton d'envoi en dehors du formulaire antd

Voici mon code

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

Je veux cette balise de formulaire extérieure, veuillez suggérer

    <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>

reactjs antd

0 commentaires

3 Réponses :

0
votes

écrivez une fonction personnalisée comme celle-ci:

function handleSubmit(){
  form.validateFields().then((values) => {
    // do something with values
  })
}

et appelez-le depuis Button onClick. vous n'avez donc pas besoin des accessoires Form onFinish .

2 commentaires

comment puis-je créer une référence pour le formulaire

dans antd v4, utilisez ceci: const [form] = Form.useForm();

0
votes

désolé je cherchais et voyais cette vieille question.

comme dans le commentaire, vous devez utiliser const [form] = Form.useForm();

c'est beaucoup de fonction que vous pouvez utiliser, l'un d'eux est de submit .

form.submit();

vous pouvez vous référer au document et rechercher useform:

https://ant.design/components/form/

0 commentaires

1
votes

Vous pouvez essayer de cette façon:

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

 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>
  );

0 commentaires