reactjs - onSubmit 不适用于 react.js 使用 Formik 并刷新站点

Question

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

<Formik initialValues = {{
            email: '[e-mail]',
            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 函数不起作用。我不知道为什么？请告诉我，我的代码有什么问题？

标签： reactjsvalidationformik

Answer 1

我遇到了同样的问题，原因是我从“reacstrap”（另一个库）而不是“Formik”导入组件“Form”。