formik 相关问题

MUI v5 中未定义自动完成的默认值

我在 MUI v5 的 Autocomplete 组件中设置了 defaultValue 属性，但该值始终未定义。 摘自我的代码 常量汽车 = [ { 标签：“宝马”，代码：“大众”...

formik 验证模式和初始值未更新

formKey 的状态在子组件中发生更改，formKey 的值在控制台中是最新的，但 formik 没有采用更新的值。 formKey 的状态在子组件中发生更改，formKey 的值在控制台中是最新的，但 formik 没有采用更新的值。 <Formik initialValues={formKey===1? initialValues: formKey===2? profileUrlsInitialValues: csvFileInitialValues} onSubmit={() => {}} validationSchema={formKey===1? addLeadsValidationSchema: formKey===2? profileUrlsValidationSchema: uploadCsvValidationSchema} validateOnMount > 我尝试过使用 switch case 并传递一个函数，但它不起作用，基于 formKey 值创建表单在代码编写中并不是一种好的做法，所以有什么东西可以让我更新值吗？ 有一个道具，你可以使用enableReinitialize https://formik.org/docs/api/formik#enablereinitialize-boolean

如何根据输入内容验证react formik表单？

我需要按如下方式验证表单：表单中的所有字段都是可选的，但如果至少有一个字段输入了值，则它们全部变为必填字段。 我写： const getRequiredSchema = () => {

如何使用 yup 进行验证以检查字符串最小长度、最大长度并允许为空

名字：是的 。细绳（） 。测试（ '伦', '可以为空或字符串至少 2 个字符且不超过 10', (val) => val != 未定义 && (val.length ...

无法在文本字段中显示默认值

我在默认值方面遇到问题。我正在从 GET API 获取数据，并希望显示从后端获取的字段中的默认值。 所有值都存在于initialFieldValues 中...

Formik 错误对象未在输入时正确更新

在这里进入一个新的代码库，这也是我第一次使用 Formik 和 Yup，所以我会尽量简洁，但请耐心等待。 我有一些用 Formik 构建的表单并使用

Formik 动态设置数组中元素的FieldValue

我们有一个带有翻译的 Formik 表格。初始值如下所示： { // 这里还有其他东西，比如 id、createdAt 等。 翻译：[ { 语言代码: 'de', 名称：“德国人”， }...

Formik：如何从数组设置初始值？

我的客户对象具有与其关联的一系列信用卡，如下所示： { "_id":"5d63e3a32f093f2b5e41ef96", “名字”：， “姓氏”：，...

React ref 和 Formik innerRef - current.values 未更新

我正在尝试将 Formik 与 React 的 useRef 挂钩结合使用来创建对我的表单的引用，然后我可以在该表单之外访问该引用。然而，无论我做什么，参考中的值......

我怎样才能让react-bootstrap表单组件与同名的formik组件很好地配合工作？

首先，我制作了一个用formik验证的表格。之后，我的团队决定使用 React-Bootstrap 进行样式设计。这个库有一个 对象，与 Formik 相同。但它没有验证正确... 首先，我制作了一个用formik验证的表格。之后，我的团队决定使用 React-Bootstrap 进行样式设计。这个库有一个 <Form> 对象，与 Formik 相同。但它没有正确验证。它要么始终将输入字段视为无效，从而将其边框设为红色，要么始终将输入字段视为正确。 我怀疑这是一个组合库的问题，这些库既适用于表单，又具有同名的组件。我设法让它与原始引导库一起工作。但我还是想知道为什么会发生这种情况以及是否有解决方案。 import React, {useState} from 'react'; import '../FormStyles.css'; import * as yup from "yup"; import { Formik, Form, ErrorMessage, Field } from 'formik'; const TestimonialForm = ({ testimonial = null }) => { const initialValues = { name: testimonial?.name || "", description: testimonial?.description || "", image: testimonial?.image || "" }; const schema = yup.object().shape({ name: yup.string().min(4, "Name must be at least 4 characters long.").required("You have to provide a name."), description: yup.string().required("You have to provide a description."), image: yup.string() .matches( /\.(jpg|png)$/, "We only support .png or .jpg format files." ) .required("You have to provide an image.") }); <Formik initialValues= {initialValues} validationSchema = {schema} > 这是带有 Formik 组件的表单 {({}) => ( <div> <Form className="form-container"> <Field className="input-field" type="text" name="name" placeholder="Testimonial title"/> <ErrorMessage name="name" /> <Field className="input-field" type="file" name="image" placeholder="Testimonial image"/> <ErrorMessage name="image" /> <button className="submit-btn" type="submit">Send</button> </Form> </div> )} </Formik> 这里是react-bootstrap组件（我只更改导入值。）这是那些验证不好的组件。 {({touched, errors}) => ( <div> <Form className="form-container" onSubmit={onSubmit}> <Form.Group controlId="name"> <Form.Control className="input-field" type="text" name="name" isInvalid={name.touched && errors.name} placeholder="Testimonial title"/> <Form.Control.Feedback type="invalid"> {errors.name} </Form.Control.Feedback> </Form.Group> <Form.Group controlId="image"> <Form.Control className="input-field" type="file" name="image" isInvalid={image.touched && errors.image} /> <Form.Control.Feedback type="invalid"> {errors.image} </Form.Control.Feedback> </Form.Group> <button className="submit-btn" type="submit">Send</button> {message && <div>{message}</div>} </Form> </div> )} </Formik> 我像这样初始化引导表单导入： 从react-bootstrap导入{Form as myForm}； 然后你可以像这样使用它： 这样它就不会被formik的Form组件覆盖

通过相互检查值来反应 Formik 验证

我正在使用 Formik 进行数据验证，我遇到了一些应该很简单的事情，但我无法弄清楚，即使在阅读文档并查看了几个小时之后也是如此。 基本上我...

前端提交表单数据时服务器无响应

在 youtube 上从 EdRoh 构建 MERN 项目时，我遇到了这个问题，在注册页面上，当我提交表单数据时，它应该重定向到登录页面，并且数据应该存储在 mon...

在 Formik 字段选择和 Yup 验证中继续显示错误消息

我第一次尝试使用formik和yup valiation， 我创建了一个选择字段并放置了一些选项， 每次选择该选项后，它都会显示验证错误消息，...

Formik 和 Yup：类型错误：无法读取未定义的属性“对象”

我是 React 新手，正在尝试使用 yup 来进行验证。我目前收到以下错误： 类型错误：无法读取未定义的属性“对象” 用这个代码：

如何创建与 Formik 无缝协作的自定义选择组件？

我使用 TypeScript 和 Tailwind CSS 在 React 中创建了一个自定义的“Select”组件，但我在将其与 Formik 库集成以进行表单验证时遇到问题。尽管...

Formik 对象不渲染

我创建了一个名为 的自定义输入，并对其应用了 useField() 和 useFormikContext() ： const [字段，元] = useField(props); const { setFieldValue } = useFormikContext(); 我创建了一个名为 <FormInput> 的自定义输入，并对其应用了 useField() 和 useFormikContext()： const [field, meta] = useField(props); const { setFieldValue } = useFormikContext(); <FormInput> 是名为 UI 的库的一部分。我正在导入该库并尝试创建一个非常简单的表单来测试，一个字段，唯一的验证是它是必需的： import React, { useContext } from "react"; import { DataContext } from "../../context/DataContext"; import * as UI from "@tui/uilibrary"; import { composeThemeFromProps } from "@css-modules-theme/react"; import styles from "./EnrollStep5.module.scss"; import { Formik, Form } from "formik"; import * as Yup from "yup"; const EnrollStep5 = (props) => { const context = useContext(DataContext); const theme = composeThemeFromProps(styles, [context, props]); return ( <Formik initialValues={{ name: "", }} validationSchema={Yup.object().shape({ name: Yup.string().required("Required"), })} > {(props) => { <Form className={theme.EnrollStep2}> <UI.FormInput type={"text"} name={"name"} label={"Name"} /> </Form>; }} </Formik> ); }; export default EnrollStep5; 这显示为空白。 Formik 对象出现在组件浏览器中，但显示为好像没有子对象。我感觉这只是由于缺乏经验而我已经很接近了。我做错了什么？ 简而言之： 将 <Form>...</Form> 括在（括号）而不是{大括号}中。 更详细一点： 因此，基本上，使用大括号的代码中发生的情况是您正在输入回调函数。所以 <Form>...</Form> 只是漂浮在函数体内的某个地方。你打算做的就是退货。 因此，您可以在大括号内添加 return 语句（return <Form>...</Form>;），也可以不进入函数体而直接返回值。例如。例如 (props) => <Form>...</Form> 或 (props) => (<Form>...</Form>)，无论您喜欢哪个。 您需要在 <Field> 组件内部使用 <Form>...</Form> 组件，如下所示： <Formik initialValues={{name: ""}}> <Form> <Field name="name" placeholder="Name:"></Field> </Form> </Formik> <Field>组件会将它们的值传递给formik，它可以处理提交等。 您可以创建自定义 Field 组件： <Formik initialValues={{ name: "" }}> <Form> <Field name="name" placeholder="Name:"> {({ field }) => ( <CustomInputComponent {..field} /> )} </Field> </Form> </Formik> <CustomInputComponent> 应包含 html <input/> 元素，或者您可以使用 flowbite、materialUI 输入组件，如下所示。 如果您想将 error 或 touched 对象传递给自定义组件，您应该尝试以下解决方案： <Formik initialValues={{ name: "" }}> {({ values, errors, touched }) => ( <Form> <Field name="name" placeholder="Name:"> {({ field }) => ( <CustomInput {...field} errors={errors} value={values}/> )} </Field> </Form> )} </Formik>

表单提交后在 JSX 中渲染 const 变量

为了进一步学习和练习 Next.js，我正在尝试制作一个像 Tinyurl 这样缩短长 URL 的网站。但是，我在呈现缩短的 URL 时遇到问题。我正在使用表格并在

React Formik onSubmit 特定于运行构建的问题

我有一个问题，我构建的React应用程序无法在Formik的onSubmit函数中提交。 在 dev react-scripts start 中运行效果很好。 只有当我构建项目并尝试服务...

React Formik 自动完成从对象数组中选择值

如何在 React 中使用 formik 实现自动完成，以便从对象数组中选择单个值和多个值？[在此处输入图像描述] (https://i.stack.imgur.com/ekkAi.png)

onChange 在没有回调的情况下无法按预期工作

这段代码给了我一个严重的 setState 错误。我希望 onChange 中的代码在 onChange 之后立即运行，而不需要回调 ()=>，因为我希望在所有表单字段都存在时禁用按钮...