Question

我正在使用 Semantic UI React 和 Formik 构建一个注册表单。

无论我尝试过什么，我都无法在尝试提交表单时触发 onSubmit 事件，即使我暂时禁用了表单验证。

我只是想console.log() 发送一条消息，此时我什至不担心表单的值。

据我所知，它应该可以工作......但我也注意到初始值也没有从该变量中填充。

我在某个时候注意到有人为 Semantic UI React 开发了一个包装器来结合两个库的功能，但也没有太多运气（除非我也错误地使用了它）。

我是否应该放弃 <Formik /> 组件（尽管它似乎是使用它的最佳方式）并采用 React 钩子实现来代替？

我很茫然，不知道自己做错了什么，除非是疏忽。

RegisterForm.tsx（组件）

import React from 'react';
import { Grid, Button, Form } from 'semantic-ui-react';
import { Formik } from 'formik';
// import * as Yup from 'yup';

// Interface
import { RegisterData } from '../../interfaces/RegisterData';

// Component
export const RegisterForm = () => {

    const initValues: RegisterData = {
        given_name: 'Test',
        family_name: 'Test2',
        email: '',
        phone: '',
        username: '',
        password: '',
        confirm_password: '',
        agreeTOS: false
    };

    // const validationSchema = Yup.object({
    //     given_name: Yup.string().max(20, "Must be 20 characters or less!").required("Required!"),
    //     family_name: Yup.string().max(20, "Must be 20 characters or less!").required("Required!"),
    //     email: Yup.string().email("Invalid e-mail address!").required("Required!"),
    //     phone: Yup.string().matches(/^[+]*[(]?[0-9]{1,4}[)]?[-\s./0-9]*$/i, "Invalid phone number!")
    //         .min(8, "Must be at least  8 digits!").max(15, "Must be 15 digits or less!").required(),
    //     password: Yup.string().min(8, "Must be at least 8 characters!").required(),
    //     confirm_password: Yup.string().oneOf([Yup.ref('password')], "Passwords do not match!").required("Required!"),
    //     agreeTOS: Yup.boolean().oneOf([true], "Terms must be accepted!").required("Terms must be accepted!")
    // })

    // const handleSubmit = async (values: RegisterData) => {
    //     setTimeout(() => {
    //         console.log("Values: ", values);
    //     }, 2000);
    // }

    return (
        <Grid.Row>
            <Grid.Column width={10}>
                <Formik
                    onSubmit={() => { console.log('test'); }}
                    initialValues={initValues}
                >
                    {({ isSubmitting }) => (
                        <Form>
                            <Grid>
                                <Grid.Row>
                                    <Grid.Column width={16}>
                                        <Form.Group widths="equal">
                                            <Form.Input name="given_name" label="First Name" fluid />
                                            <Form.Input name="family_name" label="Last Name" fluid />
                                        </Form.Group>
                                    </Grid.Column>
                                </Grid.Row>
                                <Grid.Row>
                                    <Grid.Column width={8}>
                                        <Button type="submit" color="orange" fluid loading={isSubmitting}>Submit Form</Button>
                                    </Grid.Column>
                                    <Grid.Column width={8}>
                                        <Button type="submit" color="grey" fluid>Submit Form</Button>
                                    </Grid.Column>
                                </Grid.Row>
                            </Grid>
                        </Form>
                    )}

                </Formik>
            </Grid.Column>
        </Grid.Row>
    )
}

RegisterData.ts（保存表单数据的接口）

export interface RegisterData {
    email: string;
    phone: string;
    username: string;
    given_name: string;
    family_name: string;
    password: string;
    confirm_password: string;
    agreeTOS: boolean;
}

预先感谢您的任何帮助！我真的很困惑，我觉得我可能在这里忽略了一些东西，但我不知道它可能是什么。

Answer 1

Formik 是通用表单库，不能与第三方表单字段组件一起使用。

您需要做的是是否使用或 useField API 手动绑定您的组件，或者使用现成的包装器 https://github.com/JT501/formik-semantic-ui-react 将 formik 绑定添加到语义用户界面组件

当我没有验证时，为什么我的 Formik 表单没有提交？

1 个答案: