useFormik最佳实践
useFormik是一个流行的前端开发库，用于简化表单处理的过程。它基于React，并提供了一种轻量级的方式来处理表单的验证、数据绑定和提交操作。
useFormik的最佳实践包括以下几点：
- 表单验证：useFormik提供了内置的验证机制，可以通过指定字段的验证规则来确保用户输入的数据的有效性。常见的验证规则包括必填字段、最小长度、邮箱格式等。通过在表单字段上添加验证规则，可以在用户输入数据时自动验证并显示错误信息。
- 数据绑定：useFormik使用了双向数据绑定的方式，可以将表单字段的值与组件内部的状态进行关联。通过在组件中使用useFormik Hook，可以轻松地将表单字段的值绑定到组件的状态中，并实现对数据的修改和更新。
- 表单提交：useFormik提供了一个方便的方式来处理表单的提交操作。可以通过定义一个提交函数，在表单提交时触发该函数并获取表单中的数值。在提交函数中可以进行进一步的处理，比如发送请求到服务器或执行其他业务逻辑。
- 错误处理：useFormik还提供了一种机制来处理表单验证中的错误。当用户输入不符合验证规则时，可以在表单字段上显示相应的错误信息。这可以通过在组件中使用useFormik Hook的返回值来实现，通过访问字段的错误属性，可以获取错误信息并将其显示在界面上。
- 推荐的腾讯云产品：腾讯云提供了丰富的云计算产品和服务，可以用于支持使用useFormik开发的应用。其中，推荐的产品包括云服务器CVM（产品介绍：https://cloud.tencent.com/product/cvm）用于部署应用程序，云数据库MySQL（产品介绍：https://cloud.tencent.com/product/cdb_mysql）用于存储和管理数据，云对象存储COS（产品介绍：https://cloud.tencent.com/product/cos）用于存储和分发静态资源。
通过遵循以上最佳实践，使用useFormik可以更轻松地开发和维护复杂的表单功能。它能够大幅度简化表单验证、数据绑定和提交的过程，提高开发效率，并提供了丰富的功能和扩展性，可以满足各种不同的应用场景。
相关·内容
我有包含formik的函数组件： const SignupForm = () => {
const {handleSubmit, values, handleChange, errors, handleBlur, isSubmitting, setSubmitting} = useFormik({
initialValues: {
/....
},
validateOnBlur: false,
validateOnchange: false,
validationSchema:
浏览 17提问于2020-04-10得票数 0
回答已采纳
formik文档似乎不鼓励使用useFormik钩子--但整个入门教程都只使用useFormik --所以我不确定该如何继续--这非常令人困惑。如果我不需要connect、FastField、ErrorMessage等，使用useFormik有什么缺点吗？
浏览 59提问于2020-01-31得票数 2
我有一个使用const [mode, setMode] = useState(false)创建的react变量，还有一个useFormik实例const formik=useFormik(initialValues, schema, onSubmit)。
每当模式更改为true时，我都必须更新表单。但是，问题是我不能在条件中使用useFormik (我的集成开发环境会给出一个错误)，我也不能在像useEffect这样的东西中使用useFormik (集成开发环境说不能在不是react组件的回调中使用钩子)。
我该如何去实现它呢？
浏览 0提问于2021-05-17得票数 1
1回答
我如何使用useFormik钩子与`？
我试过了但不起作用
const formik = useFormik({
initialValues: {
healthBackground: [],
},
onSubmit: (values) => alert(JSON.stringify(values)),
});
return (
<formik>
<input type="checkbox" {...formik.getFieldProps("healthBackground")} v
浏览 1提问于2021-12-14得票数 1
回答已采纳
1回答
下面是我使用useFormik钩子的代码
const formik = useFormik({
initialValues: {
name: '',
status: 'new',
functionalBreakdown: [],
spatialBreakdown: [],
form: [],
discipline: [],
companyId,
},
validate,
onSubmit: async (values) => {
try {
// const res
浏览 3提问于2022-07-07得票数 0
在一个简单的react应用程序中，我使用了formik钩子useFormik，但是浏览器抱怨它在错误的地方使用。以下是我所做的：
import React from 'react';
import { useFormik } from 'formik';
const SignupForm = () => {
// Pass the useFormik() hook initial form values and a submit function that will
// be called when the form is submi
浏览 2提问于2021-05-25得票数 1
我创建了一个由几个组件组成的react formik表单。我需要将useFormik对象传递给表单的组件。formik的正确类型是什么？ 父窗体 const formik = useFormik({ ... 子组件 interface IAddressBoxProps {
skip: () => void
formik: any
}
const AddressBox: React.FC<IAddressBoxProps> = (props: IAddressBoxProps) => {
const { skip, formik } = props
.
浏览 35提问于2020-10-10得票数 2
我有一个验证架构对象： SCHEMA = object().shape({
...
someField: string().required(validation_keys.required),
...
}); 我在我的组件中使用useFormik： const formik = useFormik({
initialValues: values,
onSubmit: ...,
validationSchema: SCHEMA,
}); 我正在寻找一种将参数传递给我的模式的方法，因此当参数为true时才需要someField……我读了一些关于上下文的文章，也试着用wh
浏览 33提问于2021-01-14得票数 1
我正在寻找如何在useFormik事件中使用带有onSubmit钩子的异步等待。我想在onSubmit事件中使用axios库，但是使用异步等待，但我无法找到如何在onSubmit事件中使用异步等待。
import React from 'react';
import { useFormik } from 'formik';
const SignupForm = () => {
const formik = useFormik({
initialValues: {
firstName: '',
lastN
浏览 7提问于2022-06-20得票数 0
回答已采纳
2回答
我正在反应本机项目中使用useFormik钩子。
因此，我尝试在我的另一个组件中初始化useFormik，然后在我的注册页面中导入它，并使用here.Here作为下面的代码。
import React from "react";
import { Formik } from "formik";
import {
signupValidationSchema,
} from "../../validationSchemas";
import { useFormik } from "formik";
export const S
浏览 0提问于2021-02-16得票数 12
目前，我在当前的项目中使用React、Redux Toolkit和Formik，情况是，当我使用help onSubmit方法提交表单数据(使用useFormik()钩子)时；在onSubmit方法中，我调用Redux操作(使用useDispatch()钩子)，然后使用useSlector钩子直接访问状态数据，但我总是得到以前的值。样本代码如下：
const formik = useFormik({
initialValues,
onSubmit : (values) => {
alert(JSON.stringify(values));
d
浏览 1提问于2020-06-16得票数 1
我使用useFormik钩子来处理数据。添加数据很好，但是当我想要更新同一组件中的数据时，我需要将初始值更改为自定义对象，而不是使用空字符串。有没有办法用useFormik钩子做到这一点？虽然我可以使用状态来实现这一点，但是一直使用formik会有什么好处呢？请帮帮忙！ const formik = useFormik({
initialValues: {
name: '',
post: '',
contact: '',
email:
浏览 23提问于2020-12-09得票数 4
回答已采纳
我有一个带有<form>的基本组件
BaseForm.tsx
import React from 'react'
import { useFormik } from 'formik';
export default function BaseForm() {
const formik = useFormik({
initialValues,
validationSchema,
onSubmit: values => console.log(values),
});
return (
<d
浏览 4提问于2021-04-28得票数 0
1回答
使用带有类型记录的Reactjs
我想把useFormik挂钩传递给组件道具。
这样做的原因是减少不必要的行和增加重用。
我现在的代码
...
const formik = useFormik({
initialValues: { userName: ''},
validationSchema,
onSubmit: (values) => {}
})
return (
<Form>
{/* A place to make a component. */}
<Text
id="userNa
浏览 12提问于2021-12-15得票数 1
回答已采纳
在收到来自服务器的响应后，我想更改min验证值，下面是代码
const form =useFormik({
initialValues:{name:'',email:'',price:0},
validationSchema:Yup.object({
'email':Yup.string().required("Email required").email("Invalid email"),
'name':Yup.string()
浏览 2提问于2022-05-08得票数 0
我正在尝试让useFormik验证单选项组，但它似乎不起作用，下面是我正在做的一个简单示例，每当我在检查任何单选输入后提交表单时，formik都会抛出验证错误({currState：“您必须选择属性状态”})，即使我选择了一个选项。我意识到getFieldProps将值字段附加到广播中，所以我尝试使用defaultValue，然后react抛出了一个关于选择受控和非受控组件的错误。
import { useFormik } from "formik"
export function ListProperty(){
const { handleSub
浏览 1提问于2020-10-02得票数 1
可以在TypeScript中使用useFormik()钩子吗?如果可以，我应该如何转换下面的代码？ 我有一个简单的表单，我想在TypeScript应用程序中复制它： import React from 'react';
import * as Yup from 'yup';
import { Form, TextInput, Button } from './some/location';
const QuerySearch = () => {
const { handleChange, handleBlur, values }
浏览 30提问于2021-07-16得票数 1
我有一个表单与Formik，我将减少重新呈现，所以我使用了FastField。我得到了错误Cannot read properties of undefined (reading 'getFieldProps')，我不知道如何解决它。
有完整的代码
我发现了和
import React from "react";
import ReactDOM from "react-dom";
import { useFormik, FastField } from "formik";
import * as yup from "yup
浏览 21提问于2022-03-09得票数 0
在输入元素中，handleChange函数将从onChange事件接收事件对象。如何为非输入字段创建自定义handleChange函数，如以下所示？
import React from 'react';
import { useFormik } from "formik";
const SomeForm = () =>
{
const { handleChange, handleSubmit, values } = useFormik({
initialValues: {
type: `company`, name: ``,
浏览 6提问于2020-08-13得票数 3
回答已采纳
我有一个更新的ProfilePage组件，我想使用useQuery预加载从Axios请求收到的数据的表单值，但是似乎在请求完成之前useFormik initialValues呈现，因此初始值未定义，有人能帮我吗？
const { isSuccess, data } = useQuery("author", async () => {
const endPoint = `${baseURL}/auth/author`;
return Axios.get(endPoint, {
headers: {
"x-auth-t
浏览 11提问于2022-02-11得票数 1
我试图在useFormik钩子中使用Formik，但是在使用formik时，我在控制台中得到了这个错误。当我移除标签时，错误就消失了。但我不知道如何解决这个错误：
Formik上下文未定义，请验证您正在呈现、或自定义上下文--使用组件作为组件的子组件。组件名称: ErrorMessageImpl
这是我的密码：
import { ErrorMessage, useFormik } from 'formik';
import { observer } from 'mobx-react-lite';
import { useStore } from '
浏览 4提问于2022-03-11得票数 0
我正在使用Formik的useFormik钩子来管理ReactJS中的表单。但我不知道如何构建在Formik的handleChange函数之上或与之一起工作的自定义onChange处理程序。我尝试构建一个自定义的更改处理程序，如下所示，但我无法确定下一步该采取什么步骤。 import React from "react";
import { useFormik } from "formik";
function testForm() {
const { handleChange, values } = useFormik({
initialVa
浏览 19提问于2020-08-24得票数 0
回答已采纳
1回答
我使用Formik和Yup进行验证，使用useFormik() hook，如下所示：
const formik = useFormik({
initialValues,
validationSchema: yup.object({
password: yup
.string()
.required('Please enter a password ')
.matches(/[a-z]/, ONE_LETTER_MESSAGE)
.mat
浏览 6提问于2022-08-01得票数 0
我想把formik作为一个道具传递给子组件CustomFormGroup，我的父组件是配置文件，我正试图遵循的答案。在Proflie组件中，我得到了错误。错误:无效钩子调用。钩子只能在函数组件的主体内调用。
组件
import Input from "antd/lib/input/Input";
import { customFormGroupProps } from "../types";
import { useFormikContext } from "formik";
const CustomFormGroup = (props: cu
浏览 3提问于2022-04-08得票数 0
回答已采纳
1回答
我在react中使用formik进行验证，但现在我需要在yup.object({})中使用firstName的值。我怎样才能访问它？
const validationSchema = yup.object({
firstName: yup
.string("Enter your First Name")
.required("First Name is required"),
})
const formik = useFormik({
initialValues: {
firs
浏览 10提问于2021-06-01得票数 0
回答已采纳
下面是我使用React的formik表单验证代码。默认情况下，在加载表单时，我希望禁用submit按钮：
import { useFormik } from "formik";
import * as Yup from "yup";
const formik = useFormik({
initialValues: {
firstName: "",
lastName: "",
email: ""
},
validationSchema: Yup.obje
浏览 6提问于2019-12-22得票数 51
回答已采纳
在我的表单组件中，我想使用带有useFormik钩子的FieldArray。当我尝试这样做的时候，我得到了TypeError: _this$props2$formik is undefined错误。 我应该切换到类组件，还是可以以某种方式将formik注入到FieldArray中？或者有没有办法做到这一点？ const MyForm = ({openPanel}) => {
const intl = useIntl();
const formData = useSelector(state => state.form[Forms.SOURCE_EDIT]);
浏览 43提问于2020-01-30得票数 4
回答已采纳
我有一个使用useFormik()的钩子组件，这是我的初始值： const formik = useFormik({
initialValues: {login: '', password: '', inactive: false},
validationSchema: schema,
onSubmit: async (values, { resetForm }) => {
await dispatch(UserActions.createUser(values, resetForm))
},
}) 有时
浏览 26提问于2020-03-17得票数 1
警告: isInitialValid已被废弃，并将在Formik的未来版本中删除。请改用initialErrors或validateOnMount。
我没找到validateOnMount吗？
const formik = useFormik({
initialValues,
isInitialValid:false,
validationSchema ,
onSubmit: (values, errors) => {
console.log(JSON.stringify(values, null, 2));
浏览 8提问于2020-12-30得票数 1
回答已采纳
我在使用useFormik进行打字时遇到了一个错误，有人能帮我吗？非常感谢。 在const value = formik.values[field.name];行，我得到了这个错误:元素隐式地有一个'any‘类型，因为'string’类型的表达式不能用来索引类型'{ name: string；description: string；color: string；}‘。 const fields = [
{name: 'name', label: 'GENERAL.NAME'},
{name: 'description
浏览 14提问于2021-08-19得票数 0
回答已采纳
I txt文件，在编写代码时，似乎接受了使用80个字符/行的最佳做法。这也适用于段落中的文本行。如果我的段落包含320个字符，它应该写成三行。是否有一个标记标准来定义这是否是最佳实践，例如对于GitHub README.md文件？
浏览 3提问于2015-04-29得票数 19
我有翻译用的组件语言
const Language = (props: IOwnProps) => {
// error is in next line for useSelector
const language = useSelector(
(state: IState) => state.currentLang
);
return getTranslations(
props.languageString
);
};
在表单中，我使用formik进行验证。
const validationSc
浏览 8提问于2022-01-06得票数 0
回答已采纳
我创建了一个简单的项目来解释我的问题 下面是完整的代码 https://codesandbox.io/s/check-it-4d2g1?file=/src/App.tsx:585-598 我希望将initialValues从应用程序组件传递到Step1组件，然后在Step2组件中显示firstName 下面是我在useFormik中的initialValues钩子 const formik = useFormik({ initialValues: { firstName: "", lastName: "" } }); 这是第一步 在这里，用户填写firstNa
浏览 7提问于2020-09-26得票数 0
我有一个家庭作业问题，这表明应用安全性和可用性最佳实践并不足以创建一个安全和可用的系统。我遗漏了什么？为什么这还不够？
如果我遵循可用性最佳实践，我最终会得到一个可用的系统吗？我想是的。
如果我遵循安全最佳实践，我最终会得到一个安全的系统吗？我想也是。
那我错过了什么？
浏览 0提问于2017-01-21得票数 2
1回答
TLDR:如何检查所有3个数组是否都是相同长度的
我有一个可选对象people，其中包含一个数组person_name，每个人都有好恶。我怎样才能查到：
，如果一个人在索引1处输入了，例如，必须在索引1上有一个数组，在“喜欢”中，而对于“不喜欢”则是一样的？
例如，这是被接受的：
{
person_name: ['foo', 'bar'],
likes: [['foo stuff'], ['bar stuff']],
dislikes: [['bar shit'], ['foo sh
浏览 2提问于2021-08-07得票数 1
回答已采纳
我有一个复选框，当单击该复选框时，它不会显示我希望在折叠中实现的文本区域，因此，当单击复选框时，我希望看到内容。复选框在单击时不会显示内容。
import React from 'react';
import { Grid, FormControlLabel, Checkbox} from '@mui/material';
import { Collapse } from 'react-collapse';
import { Formik } from 'formik';
import { useFormik } from
浏览 8提问于2022-11-15得票数 0
1回答
我有这样的组件结构。实际的代码不是这样的，我只是想帮助您可视化。
<EditAssessment>
<AssessmentForm>
<AssessmentScheduleCronWeekField>
</AssessmentScheduleCronWeekField>
</AssessmentForm>
</EditAssessment>
问题是，当我将值从EditAssessment传递给子组件时，useformMik正在更改该值。
EditAssessment comp
浏览 26提问于2022-08-13得票数 1
我不完全理解<Formik/>和useFormik()实现之间的区别。我希望有人能给我指明正确的方向。
是否可以将formik.setFieldValue()与<Formik />结合使用？我需要在异步回调中设置值。
如果是这样的话，请您分享一下如何做到这一点。提亚
浏览 7提问于2022-01-25得票数 0
2回答
LAMP最佳做法
、、
有人知道LAMP最佳实践清单吗？网络上有很多不同的建议，但是如果有人已经发布了Linux/Apache/Mysql/PHP托管架构的最佳实践指南或书籍，那就太好了。
浏览 0提问于2011-02-25得票数 0
1回答
目前，我正在尝试创建一个登录，但由于某些原因，我的登录代码没有被触发。函数loginUserWithEmail未被触发。它没有被触发，因为控制台中没有打印loginUserWithEmail函数中的任何console.log。Login.tsx中的onSubmit()函数是在我单击“登录”按钮时触发的。 谢谢。 Login.tsx： import { useFormik } from 'formik';
import { loginUserWithEmail, LoginFormData } from '../../actions/authActions'
浏览 15提问于2021-10-31得票数 0
有没有什么小项目来说明C++的最佳实践？如果一个人能从一个简单而完整的评论项目中学到很多东西，而不是阅读那些展示了许多无关片段的最佳实践的材料，那就太好了。
例如，项目的一个头文件可能如下所示：
#pragma once // Use 'pragma once' if your compiler supports it. Faster build time than using include guard. More explanation...
#ifndef MYHEADER_H // Traditional include guard, for compilers th
浏览 4提问于2012-01-05得票数 0
2回答
我试图将表单验证与自定义挂钩分开。钩子返回yup伪造模式，但它需要formik包中的函数来构建该模式。如何在组件根目录中获得对formik的引用，并将其传递给自定义钩子？组件如下所示：
export const MyView = () => {
let formikRef: FormikProps<FormData> | undefined = undefined;
const { validationSchema } = useValidationSchema(formikRef);
...
return (
<Form
浏览 35提问于2022-09-05得票数 0
回答已采纳
1回答
我有一张这样的表格
const SubtitleForm = ({ sub }) => {
const formik: any = useFormik({
initialValues: sub,
onSubmit: async (values) => {
const res = await update(values)
},
})
return (
<form className="subtitleFormComponent">
浏览 5提问于2022-01-31得票数 0
用例：确保职务公告开始日期不是今天，也不是过去的日期。
我的代码是：
const validationSchema = yup.object({
startDate: yup.string().required("Please complete this field.").nullable(),
})
问题：如何确保它既不是今天，也不是一个历史性的日期？
附带注意，我使用的是formik，validationSchema使用如下：
const formik = useFormik({
initialValues,
enableReinitialize
浏览 0提问于2022-08-23得票数 0
1回答
我正在用android开发一个应用程序，遇到了一个匿名类的内存泄漏，有没有最佳实践或常见场景来避免android中的内存泄漏？
浏览 0提问于2013-10-26得票数 0
我尝试使用Formik库来验证表单，但是在将onChange函数传递给输入组件时遇到了问题。 以下是主要组件： import React from 'react';
import { IonHeader, IonContent, IonToolbar, IonTitle, IonButton, IonPage, IonList } from '@ionic/react';
import { useFormik } from 'formik';
import BasicInput from '../components/form
浏览 12提问于2020-04-01得票数 0
回答已采纳
我从redux store获取了formik initialValues的值，但它们在组件挂载时是未定义的。 原始示例 const value1 = useSelector(state => state.store.value1)
const initialValues = { value1 }
const formik = useFormik({ initialValues })
...
return (
<>
<input name='value1' value={formik.values.value1} />
</
浏览 13提问于2020-10-18得票数 1
回答已采纳
1回答
我希望这个输入字段的Yup错误一旦一个键被记录为最大的交互性就会触发。但是，只有当我从文本字段中单击时，我才会得到错误。在发生第一个onBlur事件并单击“回退”文本字段后，将实时显示下一个错误。
我怎样才能改变这种行为？如果我的第一个字符不是字母，或者我的名字不是5-12个字符，我希望立即出现一个错误。
这是我的密码：
import ReactDOM from 'react-dom';
import { useFormik } from 'formik'
import * as Yup from 'yup';
function Contain
浏览 13提问于2022-03-08得票数 0
回答已采纳
1回答
我在表单中使用模块和formik。
import React, { useImperativeHandle, useReducer, forwardRef } from 'react';
import PropTypes from 'prop-types';
import { Form} from "react-bootstrap";
import "react-datetime/css/react-datetime.css";
import { useFormik} from 'formik';
import
浏览 7提问于2022-03-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
