formik 相关问题

React的表单库

<Field className="col ml-1 pl-1 pr-0 form-control" type="number" min="0" max="100" id={`itemsAndServices[${index}].percentage`} name={`itemsAndServices[${index}].percentage`} /> 这种对min和max的限制似乎不起作用。这是受支持的还是我必须使用原始输入您可以在 Formik 中使用 Yup 进行验证。这是例子： import React from 'react'; import { Formik, Form, Field } from 'formik'; import * as Yup from 'yup'; const SignupSchema = Yup.object().shape({ firstName: Yup.string() .min(2, 'Too Short!') .max(50, 'Too Long!') .required('Required'), lastName: Yup.string() .min(2, 'Too Short!') .max(50, 'Too Long!') .required('Required'), email: Yup.string().email('Invalid email').required('Required'), }); export const ValidationSchemaExample = () => ( <div> <h1>Signup</h1> <Formik initialValues={{ firstName: '', lastName: '', email: '', }} validationSchema={SignupSchema} onSubmit={values => { // same shape as initial values console.log(values); }} > {({ errors, touched }) => ( <Form> <Field name="firstName" /> {errors.firstName && touched.firstName ? ( <div>{errors.firstName}</div> ) : null} <Field name="lastName" /> {errors.lastName && touched.lastName ? ( <div>{errors.lastName}</div> ) : null} <Field name="email" type="email" /> {errors.email && touched.email ? <div>{errors.email}</div> : null} <button type="submit">Submit</button> </Form> )} </Formik> </div> ); 您还可以使用 Field 组件的 validate 属性，请参阅文档。不要使用 max，而是使用 maxLength。但是，如果您想强制执行最小长度，则需要使用类似 Yup 的内容，正如其他人所说。 <Field className="col ml-1 pl-1 pr-0 form-control" type="number" maxLength="100" id={`itemsAndServices[${index}].percentage`} name={`itemsAndServices[${index}].percentage`} />

html reactjs input formik

回答 2 投票 0

是的，使用 ctrl+v 粘贴文本时出现验证问题

{({ 字段, 表单 }) => ( )}

validation formik yup

回答 1 投票 0

Formik OnSubmit 未触发

我正在开发一个React项目，我正在使用Formik作为表单。由于某种原因，onSubmit 方法不会被触发。我一直试图找出错误出在哪里，但我找不到。我...

javascript reactjs formik

回答 3 投票 0

是的，日期验证

我在 Formik 表单中遇到有关日期字段的 Yup 验证问题。我想阻止用户选择未来的日期。目前，验证仅在我单击...时才会触发

javascript reactjs validation formik yup

回答 1 投票 0

在 TypeScript 中的 Formik 验证中分配错误消息不起作用

此刻，我正在尝试使用 React 和 TypeScript 中的 Formik 构建一个用户输入表单，用户应该在其中输入姓名、电子邮件和密码。处理输入本身工作正常，...

reactjs typescript validation formik

回答 2 投票 0

自动填充的输入字段会同时显示值和标签，直到在 React Material-UI TextField 中单击为止

我在 React 应用程序中使用 Material-UI TextField 组件作为登录表单。当浏览器（例如 Chrome）将保存的凭据自动填充到输入字段中时，我面临的问题就会发生......

reactjs material-ui formik autofill mutation-observers

回答 1 投票 0

如何使用 yup 异步验证与 formik 和 React 并避免看到第一个必需的验证

我有带有 formik 的 React 应用程序，是的，用于构建表单。我需要创建包含输入列表和代码的表单，并且必须有 API 的异步验证，这将确认代码是否存在...

reactjs formik yup

回答 1 投票 0

如何在Formik的initialValues中创建条件赋值

我在Formik中有initialValues，但我想根据另一个字段分配值。我有这个代码： const 初始值：MyValues = { 字段类型：字段类型.FIELDA，领域信息...

javascript reactjs formik

回答 1 投票 0

Formik onSubmit 函数不适用于我的代码

我正在使用react和formik创建一个表单。下面是我的代码： { 我正在使用react和formik创建一个表单。下面是我的代码： <div> <Formik initialValues={{ email: "" }} onSubmit={(values: FState, setSubmitting: any) => { console.log("Enter in submit function", values); setTimeout(() => { alert(JSON.stringify(values, null, 2)); setSubmitting(false); }, 500); }} validationSchema={validationSchemaGlobal} > {({ errors, touched, handleBlur, handleChange, isSubmitting, values, handleSubmit }: any) => ( <div> <Cards> <form onSubmit={handleSubmit}> <CardBody> <h4> Enter Your Email Address and we'll send you a link to reset your password </h4> <Field type="text" id="email" value={values.email} component={CustomInput} onChange={handleChange} onBlur={handleBlur} /> {errors.email && touched.email ? ( <div style={{ color: "red" }}>{errors.email}</div> ) : null} </CardBody> <CardFooter> <br /> <button type="submit" disabled={isSubmitting}> Send Password Reset Link {/* {isSubmitting && <i className="fa fa-sponner fa-spin"/>} */} </button> </CardFooter> </form> </Cards> </div> )} </Formik> </div> 在此 formik 表单中，onSubmit 函数不起作用。我不知道为什么？请告诉我我的代码有什么问题吗？检查您的 validationSchema。我遇到了这个问题，发现我的验证器返回了一些东西，向 Formik 发出表单无效的信号，但没有出现其他警告或消息。它就是不提交。将该道具替换为 validator={() => ({})}，即仅返回一个空对象。这应该通过验证并触发您的 onSubmit。您可以从那里恢复您的功能。 <Formik initialValues={{ email: "" }} onSubmit={() => { console.log("submit!"); }} validator={() => ({})} > {/* */} </Formik> 在我的例子中，我使用 Yup 作为验证器，并且我不小心在我的 firstName 中按要求添加了 lastName 和 validationSchema，但我的表单中没有这些值。我的validationSchema是， const SignupSchema = Yup.object().shape({ firstName: Yup.string() .min(2, 'Too Short!') .max(50, 'Too Long!') .required('Required'), lastName: Yup.string() .min(2, 'Too Short!') .max(50, 'Too Long!') .required('Required'), email: Yup.string() .email('Invalid email') .required('Required'), password: Yup.string() .min(6, 'Password must be at least 6 characters') .max(24, 'Password can be maximum 24 characters') .required('Required') }) 我刚刚删除了firstName和lastName， const SignupSchema = Yup.object().shape({ email: Yup.string() .email('Invalid email') .required('Required'), password: Yup.string() .min(6, 'Password must be at least 6 characters') .max(24, 'Password can be maximum 24 characters') .required('Required') }) 因此，请检查您的 validationSchema，看看您是否需要表单中不存在的内容。我从 Form 而不是 react-bootstrap 导入了 formik，所以我遇到了这个问题。通过导入 Form 的 formik 解决了该问题。有时，直接使用react-bootstrap的Form.Control而不是formik的Field也会出现这个问题。如果你真的必须使用Form.Control，你可以使用render道具。就我而言，onSubmit不起作用，因为我忘记将表单包装在<form></form>标签中。这是一个愚蠢的问题，但这可能是这种行为的原因。如果上述解决方案不起作用，请检查您是否有 form 标签。最初的问题有点晚了，但我遇到了同样的问题，并且解决它很容易，但很难找到。当我将“name”属性传递给组件时，我写了“DateOfBirth”而不是小写，这意味着它与我的validationSchema不匹配。我的架构如下所示： export const userSchema = yup.object().shape({ firstName: yup.string().min(1).max(50).required('Field is required'), lastName: yup.string().min(1).max(50).required('Field is required'), dateOfBirth: yup.date().required('Invalid input'),}); 这意味着组件的名称必须匹配之前（不起作用）： <DateTimePicker name="DateOfBirth" label="Date of birth" /> 之后（工作）： <DateTimePicker name="dateOfBirth" label="Date of birth" /> 就我而言，我错误地将 validationSchema 传递给了错误的道具。错误： <Formik initialValues={initialValues} validate={validationSchema} <----- Error > 正确做法： <Formik initialValues={initialValues} validationSchema={validationSchema} <----- Good > 致那些面临错误的人们：确保initialValue Objkeys与Yup验证模式匹配我提到了我处理的另一种可能性。更改按钮类型并添加 onClick 像这样 <Button type="button" onClick={submitForm}> 还在顶部添加 SubmitForm 属性以及值、触摸等 {({ submitForm, errors, handleChange, handleSubmit, touched, values }) => ( 现在可以工作了发生这种情况可能是因为表单正在提交但它无效，这可能是因为验证架构由于多种原因与您的表单不匹配，在我的例子中，这是因为有一个字符串，并且它被作为 null 发送，所以我只是将 .nullable() 添加到该字段的验证模式中。我的validationSchema中有额外的字段，它是用Yup声明的。然而该字段没有在 Formik 中声明，因此它不起作用。从validationSchema中删除该字段后，它就可以工作了。我也遇到了同样的问题。我的 onSubmit 函数没有执行 onClick 提交按钮。问题出在 Yup.validation 模式中。有一个额外的字段我没有使用。我删除了那个字段和繁荣。发布此内容是因为我遇到了相同的问题，而且问题甚至不同：我的验证函数返回一个 errors 对象，该对象始终包含所有字段，当它们正确时，所有字段都带有空字符串。当 errors 对象不为空时，表单提交似乎被禁用。就我而言，问题是 Button 组件位于 Formik 组件之外 <Formik initialValues={} validate={validate} onSubmit={handleSubmit}> <Form> </Form> </Formik> <Button type="submit">Submit</Button> 将按钮移动到表单内解决了我的问题 <Formik initialValues={} validate={validate} onSubmit={handleSubmit}> <Form> <Button type="submit">Submit</Button> </Form> </Formik> 我的错误是我没有在验证时用空白初始化错误 const errors:any={}; 这是登录表单的完整代码，请检查验证功能 <Formik initialValues={{ email: "", password: "" }} validate={(formValues) => { const errors:any={}; if (!formValues.email) { errors.email = "Invalid email"; } if (!formValues.password) { errors.password = "Password is required"; } return errors; }} onSubmit={async (values) => { console.log("submit", values); dispatch(login({ username: values.email, password: values.password })); if (loginState.isError) { alert(loginState.message); } }} >{({ values, handleChange, errors, dirty, isValid, isSubmitting, handleSubmit, setFieldValue, setFieldTouched, setFieldError }) => ( <Form onSubmit={handleSubmit}> <FormGroup> <Label>Email</Label> <Input type="email" name="email" valid={!isEmpty(errors.email)} value={values.email} onChange={handleChange}></Input> <FormFeedback className="font-weight-bold" type="invalid" role="alert"> {errors.email}</FormFeedback> </FormGroup> <FormGroup> <Label>Password</Label> <Input type="password" name="password" value={values.password} valid={!isEmpty(errors.password)} onChange={handleChange}></Input> <FormFeedback className="font-weight-bold" type="invalid" role="alert"> {errors.password}</FormFeedback> </FormGroup> <FormGroup className="text-center"> <p> {isValid === true ? "is valid" : "not valid"} </p> <Button type="submit" color="primary" className="mt-3">Login</Button> </FormGroup> </Form> )} </Formik> 我解决了这个问题，因为我声明了 onsubmit 函数而没有 const 字（我知道这很愚蠢）您还可以在返回表单的 JSX 之前打印出错误，这应该可以帮助您找出问题所在。这对我有用： <div> <Formik initialValues={{ email: "" }} onSubmit={(values: FState, setSubmitting: any) => { console.log("Enter in submit function", values); setTimeout(() => { alert(JSON.stringify(values, null, 2)); setSubmitting(false); }, 500); }} validationSchema={validationSchemaGlobal} > {({ errors, touched, handleBlur, handleChange, isSubmitting, values, handleSubmit }: any) => { // ADD THIS console.log(errors) return (<div> ... your form here </div>) }} </Formik> </div> 我错误地使用了 React 中的而不是使用了 formik 中的使用而不是按钮标签，因为我为我工作。

reactjs typescript formik

回答 18 投票 0

将 Yup 验证错误转换为可用对象

问题我有一个 formik 表单，需要有 2 个不同的验证模式，具体取决于用户使用哪个按钮提交。我看到有人说用状态来决定哪个，但我想要......

reactjs formik yup

回答 3 投票 0

使用 Controller 将输入与 React Hook Form 集成时添加自定义验证

我正在尝试使用 React Hook Form 设置自定义输入字段，因此使用 useForm 挂钩，如下所示；常量{ 控制，处理提交，登记，表单状态，

javascript reactjs react-hooks formik react-hook-form

回答 1 投票 0

无法将“touched”设置为true

我只是想创建一个自定义的Formik 。这是一个，不透明度=0，并且取决于我设计我的组件和的值我只是想创建一个自定义 Formik <Field />。它是一个 <input type = file />，不透明度=0，并且取决于 values 我对我的 <Error /> 组件和 <input type = text /> 进行样式设计。 values.photo还可以。问题是触摸永远不会成为现实，所以我无法显示我的 <Error /> 组件。你能解释一下出了什么问题吗？ https://codesandbox.io/s/purple-violet-qgxr3?file=/src/components/FileInput.js 在您的文件输入组件中只需添加以下内容： form.setTouched({...form.touched,[field.name]: true }); setTouched 接受字段对象，field.name 是文件输入名称。 Formik 提供了一个名为 setFieldTouched 的函数，可用于手动设置特定字段的 touched 值 setFieldTouched: (field: string, isTouched?: boolean, shouldValidate?: boolean) 当您通过监听 onChange 事件处理文件输入时。一旦调用 onChange 方法，您就可以通过调用将您的字段标记为 Touched .markAsTouched() 这样如果条件有效就会显示错误。

javascript reactjs formik yup

回答 3 投票 0

在react中，formik和yup如何跳过验证如果动态数组值未定义或为空使其可选

这是我的aaray： translator_services: (4) [空 × 3, {translator_category_description: "sa",translator_category_id: "6672a5a8b07e9bc1b7e36a5c",translator_category_type_id: ['

javascript reactjs formik yup

回答 1 投票 0

清除 Formik 错误和表单数据 - React Native

我正在使用 Formik，想知道在离开屏幕时如何清除错误和表单值。例如，用户尝试提交没有值的表单并显示错误：

react-native formik

回答 4 投票 0

如何在Formik上实现自定义handleChange函数？

在输入元素中，handleChange 函数将从 onChange 事件接收事件对象。如何为如下非输入字段创建自定义 handleChange 函数？导入反应

reactjs formik

回答 3 投票 0

Formik 表单在 iPhone Chrome 浏览器上意外重置

我在 React 应用程序中遇到 Formik 表单问题。当我在 iPhone 的 Chrome 浏览器上使用 Formik 提交表单时，表单会自动重置，无需任何显式调用