formik 表单中的 useFormik 是什么类型

typescript

2个回答

写回答

18164318313

2025-09-17 18:45

+ 关注

Java
Java

使用 Formik 表单时,我们可以使用 useFormik 钩子函数来管理表单的状态和行为。useFormik 是一个自定义 Hook,它帮助我们轻松地处理复杂的表单逻辑和验证。

使用 useFormik 管理表单状态

使用 useFormik 可以方便地初始化表单的初始值和验证规则。我们只需要传入一个配置对象,包含 initialValues、validationSchema 和 onSubmit 等属性。

Javascript

import { useFormik } from 'formik';

const initialValues = {

name: '',

emAIl: '',

password: ''

};

const validationSchema = Yup.object({

name: Yup.string().required('必填'),

emAIl: Yup.string().emAIl('无效的邮箱地址').required('必填'),

password: Yup.string().min(8, '密码至少8个字符').required('必填')

});

const MyForm = () => {

const formik = useFormik({

initialValues,

validationSchema,

onSubmit: values => {

console.log(values);

}

});

return (

<form onSubmit={formik.handleSubmit}>

<label htmlFor="name">姓名:</label>

<input</p> type="text"

id="name"

name="name"

onChange={formik.handleChange}

onBlur={formik.handleBlur}

value={formik.values.name}

/>

{formik.touched.name && formik.errors.name ? (

<div>{formik.errors.name}</div>

) : null}

<label htmlFor="emAIl">邮箱:</label>

<input</p> type="emAIl"

id="emAIl"

name="emAIl"

onChange={formik.handleChange}

onBlur={formik.handleBlur}

value={formik.values.emAIl}

/>

{formik.touched.emAIl && formik.errors.emAIl ? (

<div>{formik.errors.emAIl}</div>

) : null}

<label htmlFor="password">密码:</label>

<input</p> type="password"

id="password"

name="password"

onChange={formik.handleChange}

onBlur={formik.handleBlur}

value={formik.values.password}

/>

{formik.touched.password && formik.errors.password ? (

<div>{formik.errors.password}</div>

) : null}

<button type="submit">提交</button>

</form>

);

};

表单验证和提交

在上面的例子中,我们使用了 Yup 库来定义验证规则。我们可以通过调用 Yup 的验证方法来创建验证规则,比如 Yup.string()、Yup.number() 等。然后使用这些验证规则来创建 validationSchema 对象。

在表单提交时,我们可以通过调用 formik.handleSubmit 方法来触发表单的验证和提交逻辑。如果表单验证通过,将会执行 onSubmit 函数,并将表单的值作为参数传递进去。

表单状态和错误信息展示

在表单中,我们可以通过 formik.values 来获取表单的值,通过 formik.errors 来获取表单的错误信息。而 formik.touched 属性可以帮助我们判断表单字段是否被访问过。

在输入框的 onChange 和 onBlur 事件中,我们需要调用 formik.handleChange 和 formik.handleBlur 方法,以便表单状态得以更新。

如果字段的 touched 属性为 true 并且存在错误信息,我们可以展示相应的错误提示。

使用 useFormik 可以帮助我们更方便地管理和处理表单的状态和行为。我们可以定义初始值、验证规则和提交函数,同时也可以轻松地获取表单的值和错误信息。

以上是使用 useFormik 的基本示例,希望通过这篇文章能够帮助你更好地理解和使用 useFormik 来构建强大的表单功能。

举报有用(4分享收藏

yylmzy

2025-09-18 06:02

+ 关注

useFormik 是 Formik 库中的一个 React Hook,它提供了一个对象,其中包含处理表单所需的所有功能,如 handleChange、handleBlur、handleSubmit 等。

举报有用(4分享收藏

Copyright © 2025 IZhiDa.com All Rights Reserved.

知答 版权所有 粤ICP备2023042255号