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>
3 Réponses :
é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
.
comment puis-je créer une référence pour le formulaire
dans antd v4, utilisez ceci: const [form] = Form.useForm();
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:
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> );