onSubmit 在 react.js 上不起作用，请使用 Formik 并刷新网站

Question

我在 React.js 项目中使用 Formik 作为验证表单，但不幸的是它不起作用，当我点击提交按钮孔时，它将被刷新...

<Formik initialValues = {{
            email: 'test@test.com',
            password: '',
            tags: [],
            date: null,
            state: {value: 'reasonml', label: 'ReasonML'}
        }}
validationSchema = {
    SignupSchema
}
onSubmit = {
    this.handleSubmit
} > {
    ({
        handleSubmit,
        setFieldValue,
        setFieldTouched,
        handleChange,
        handleBlur,
        values,
        errors,
        touched,
        isSubmitting
    }) => (
        <Form >
            <FormGroup className="form-group has-float-label">
                <Label><IntlMessages id="forms.email"/></Label>
                <Field className="form-control" name="email"/> {errors.email && touched.email
                    ? (
                        <div className="invalid-feedback d-block">{errors.email}</div>
                    )
                    : null}
            </FormGroup>
            <FormGroup className="form-group has-float-label">
                <Label><IntlMessages id="forms.password"/></Label>
                <Field className="form-control" name="password" type="password"/> {errors.password && touched.password
                    ? (
                        <div className="invalid-feedback d-block">{errors.password}</div>
                    )
                    : null}
            </FormGroup>
            <FormGroup className="form-group has-float-label">
                <Label className="d-block"><IntlMessages id="form-components.tags"/></Label>
                <FormikTagsInput
                    name="tags"
                    value={values.tags}
                    onChange={setFieldValue}
                    onBlur={setFieldTouched}/> {errors.tags && touched.tags
                    ? (
                        <div className="invalid-feedback d-block">{errors.tags}</div>
                    )
                    : null}
            </FormGroup>
            <FormGroup className="form-group has-float-label">
                <Label className="d-block"><IntlMessages id="form-components.date"/></Label>
                <FormikDatePicker
                    name="date"
                    value={values.date}
                    onChange={setFieldValue}
                    onBlur={setFieldTouched}/> {errors.date && touched.date
                    ? (
                        <div className="invalid-feedback d-block">{errors.date}</div>
                    )
                    : null}
            </FormGroup>
            <FormGroup className="form-group has-float-label">
                <Label><IntlMessages id="forms.state"/></Label>
                <FormikReactSelect
                    name="state"
                    id="state"
                    value={values.state}
                    options={options}
                    onChange={setFieldValue}
                    onBlur={setFieldTouched}/> {errors.state && touched.state
                    ? (
                        <div className="invalid-feedback d-block">{errors.state}</div>
                    )
                    : null}
            </FormGroup>
            <Button color="primary" type="submit">Submit</Button>
        </Form>
    )
}

我使用的架构：


const SignupSchema = Yup.object().shape({
    email: Yup.string()
        .email('Invalid email address')
        .required('Email is required!'),
    password: Yup.string()
        .required('Password is required!'),
    tags: Yup.array()
        .min(3, 'Pick at least 3 tags')
        .required("At least one tag is required"),
    date: Yup.date()
        .nullable()
        .required("Date required"),
    state: Yup.object().shape({
        label: Yup.string().required(),
        value: Yup.string().required(),
    })
        .nullable()
        .required('State is required!'),
})

及其 handlesubmit 方法：


    handleSubmit = (values, {setSubmitting}) => {

        const payload = {
            ...values,
            state: values.state.value,
        };
        setTimeout(() => {
            console.log(JSON.stringify(payload, null, 2))
            setSubmitting(false);
        }, 1000);
    }

在此 formik 表单中，onSubmit 函数不起作用。我不知道为什么？请告诉我我的代码有什么问题？

Answer 1

我有同样的问题，原因是我从 'reacstrap'（另一个库）而不是从 'Formik'.

导入组件 'Form'

Answer 2

您可以在表单中使用 handleSubmit 并在提交按钮中使用 isSubmitting

<Formik initialValues={initialValues} onSubmit={onCheckCodeFunction}>
                {({...,handleSubmit,isSubmitting}) => (
                    <Form onSubmit={handleSubmit}>
                         ...
                  
                           <button type="submit" disabled={isSubmitting}> 
                            Submit 
                           </button> 
                    </Form>
                )}
            </Formik>

onSubmit 在 react.js 上不起作用，请使用 Formik 并刷新网站

onSubmit not work on react.js use Formik and refresh the site

validation

reactjs

formik