Rumah  >  Soal Jawab  >  teks badan

Gunakan Formik untuk menetapkan semula borang sebelum menyerahkannya

Selepas mengklik butang hantar, borang akan ditetapkan semula sebelum dihantar.

Saya mencipta borang menggunakan Formik. Saya cuba menggunakan resetForm Formik untuk menetapkan semula borang selepas penyerahan. Tetapi ia menetapkan semula borang sebelum menyerahkan dan menyerahkan borang kosong. Ini borang saya:

<Formik
            onSubmit={handleFormSubmit}
            initialValues={{
                content: "",
                picture: "",
            }}
        >
            {({
                values,
                handleBlur,
                handleChange,
                handleSubmit,
                setFieldValue,
                resetForm,
            }) => (
                <form onSubmit={handleSubmit}>
                    <Field
                        as="textarea"
                        onBlur={handleBlur}
                        onChange={handleChange}
                        value={values.content}
                        name="content"
                    />

                    <Dropzone
                        acceptedFiles=".jpg, .jpeg, .png"
                        multiple={false}
                        onDrop={(acceptedFiles) =>
                            setFieldValue("picture", acceptedFiles[0])
                        }
                    >
                        {({ getRootProps, getInputProps }) => (
                            <div {...getRootProps()}>
                                <input {...getInputProps} />
                                {!values.picture ? (
                                    <p>在这里添加图片</p>
                                ) : (
                                    values.picture.name
                                )}
                            </div>
                        )}
                    </Dropzone>
                    <button type="submit" onClick={resetForm}>提交</button>
                </form>
            )}
        </Formik>

Saya tidak pasti sama ada saya perlu berkongsi fungsi handleFormSubmit, tetapi inilah:

const handleFormSubmit = async (values, onSubmitProps) => {
        const formData = new FormData();
        for (let value in values) {
            formData.append(value, values[value]);
        }
        formData.append("picturePath", values.picture.name);
        fetch(`http://localhost:5000/api/home-profile/${data[0]._id}`, {
            method: "PUT",
            body: formData,
            headers: {
                Authorization: "Bearer " + token,
            },
        })
            .then((res) => {
                console.log(res.status);
            })
            .catch((err) => {
                console.log(err);
            });
    };
P粉138711794P粉138711794427 hari yang lalu444

membalas semua(1)saya akan balas

  • P粉592085423

    P粉5920854232023-09-11 20:08:42

    Alih keluar onClick={resetForm}:

    <button type="submit"> gönder</button>

    Kemudian dalam pemegang andaFormSubmit:

    ...

    .then((res) => {
        console.log(res.status);
    })
    .catch((err) => {
        console.log(err);
    })
    .finally(() => {
        resetForm(); //this
    });

    Jika ini sesuai untuk anda, sila beritahu saya.

    balas
    0
  • Batalbalas