React的表单库
我在默认值方面遇到问题。我正在从 GET API 获取数据,并希望显示从后端获取的字段中的默认值。 所有值都存在于initialFieldValues 中...
在这里进入一个新的代码库,这也是我第一次使用 Formik 和 Yup,所以我会尽量简洁,但请耐心等待。 我有一些用 Formik 构建的表单并使用
我们有一个带有翻译的 Formik 表格。初始值如下所示: { // 这里还有其他东西,比如 id、createdAt 等。 翻译:[ { 语言代码: 'de', 名称:“德国人”, }...
我的客户对象具有与其关联的一系列信用卡,如下所示: { "_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 进行数据验证,我遇到了一些应该很简单的事情,但我无法弄清楚,即使在阅读文档并查看了几个小时之后也是如此。 基本上我...
在 youtube 上从 EdRoh 构建 MERN 项目时,我遇到了这个问题,在注册页面上,当我提交表单数据时,它应该重定向到登录页面,并且数据应该存储在 mon...
在 Formik 字段选择和 Yup 验证中继续显示错误消息
我第一次尝试使用formik和yup valiation, 我创建了一个选择字段并放置了一些选项, 每次选择该选项后,它都会显示验证错误消息,...
Formik 和 Yup:类型错误:无法读取未定义的属性“对象”
我是 React 新手,正在尝试使用 yup 来进行验证。我目前收到以下错误: 类型错误:无法读取未定义的属性“对象” 用这个代码:
我使用 TypeScript 和 Tailwind CSS 在 React 中创建了一个自定义的“Select”组件,但我在将其与 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>
为了进一步学习和练习 Next.js,我正在尝试制作一个像 Tinyurl 这样缩短长 URL 的网站。但是,我在呈现缩短的 URL 时遇到问题。我正在使用表格并在
React Formik onSubmit 特定于运行构建的问题
我有一个问题,我构建的React应用程序无法在Formik的onSubmit函数中提交。 在 dev react-scripts start 中运行效果很好。 只有当我构建项目并尝试服务...
如何在 React 中使用 formik 实现自动完成,以便从对象数组中选择单个值和多个值?[在此处输入图像描述] (https://i.stack.imgur.com/ekkAi.png)
这段代码给了我一个严重的 setState 错误。我希望 onChange 中的代码在 onChange 之后立即运行,而不需要回调 ()=>,因为我希望在所有表单字段都存在时禁用按钮...
我们如何将 Chakra RangeSlider 值传递到 Formik 中?
我正在尝试使用 Formik 将数据传递到带有脉轮范围滑块的注册表单中。我无法将更改后的值传递到我的handleSignUp() 函数中。他们总是只显示最初的
如何在react formik单选字段上使用onChange属性
每当我单击不同的单选按钮时,我都希望使用 onchange 函数。但每当我尝试这样做时,formik 的默认行为就会丢失。 常量初始值 = { hasParent:“不&...
我正在尝试像这样设置日期的初始值,但是当组件呈现时,它会给我这样的错误 const formik = useFormik ({ 初始值:{ dob: 新日期 () } }) 这样做的同时...
Formik 警告:“组件正在更改要控制的文本类型的不受控制的输入”
我正在React JS中开发一个动态表单,当用户单击“添加”按钮时,注册表单将添加到屏幕上。在注册表单中,我使用 Formik 进行验证。 形式是动态的...