React的表单库
我正在创建一个项目管理应用程序,允许用户创建个人资料并可选择将个人资料图片添加到他们的个人资料中。我使用 Chakra Ui 作为我的组件库。在很多地方...
想要使用带有选项卡的formik,但有很多表单,一种方法是将我的所有表单添加到带有选项卡的formik中,但代码不会很有效,任何带有...的选项卡和组件的示例
MaterialUI 单选按钮与 Formik - 未在提交时设置值
我有一个使用 MaterialUI 进行反应的 formik 表单,除了单选按钮组之外,所有控件都在提交时传递它们的值。 这是我的设置,我是否缺少 formik 需要的属性或 h...
如何通过 useFormik Hook 来使用 Radio Group
我试图让 useFormik 来验证无线电组,但它似乎不起作用,这是我正在做的一个简短示例,每当我在检查任何无线电输入后提交表单时,formik
我有一个 Formik 注册表,其中包含密码字段和密码确认字段。我想防止在密码确认字段中进行复制和粘贴。有没有直接通过的方法
假设我有一个如下所示的架构: 导出常量架构 = yup.object({ id: yup.number().label("ID").positive().integer().required(), 名称: yup.string().label("name").max(255).re...
如何正确使用Formik的setError方法? (反应库)
我正在使用 React 与后端通信。现在尝试正确实现 Formik(表单库)。 主要问题: 如何正确使用Formik的setError方法? 客户端验证错误...
我正在使用react formik,需要在formik提交中上传多个文件并将其发布到backedn .net core api。 当将多个上传文件对象发布到后端时,我遇到了一个问题,总是得到
使 init 上的所有 Formik 字段的状态为“touched === true”
我在页面上有一个 Formik 表单,其中如果触摸为 true,则所有字段都会显示错误,并且有一个错误链接到该字段。 然而,在某些情况下我想传递一个布尔信号......
我对福米克和是的还很陌生。我很困惑为什么 selectedJobType 在我的语言验证条件中被输入为数组。 jobType 是来自选择框的字符串,所以我会
我想为输入类型=“文件”中收到的图像编写验证,但我收到 AnyPresentValue 错误。这是什么以及为什么当我将鼠标悬停在“...
使用 Fomik hook `useField` 和 `react-data-table-component` 导致无限循环
我正在formik表单中使用react-data-table-component来更新新值。但问题是每当重新渲染 MyTable 组件时,就会调用 selectableRowSelected() 回调,这
我正在使用 formik 来验证我的 React Native 应用程序上的输入。我使用了validationSchema 来定义输入的验证。 所以,每当我到达继续的屏幕时...
功能/productSlice.js 导出 const resetState = createAction("Reset_all") 常量初始状态 = { 产品: [], 产品: {}, 产品图片:[], 错误:错误, 是L...
我知道如何使用常规表单输入/选择/等来设置它的样式,但我已经从使用它们切换到 Formik Field,并且上面的工作方式不同。 我知道如何使用常规表单输入/选择/等来设置它的样式,但我已经从使用它们切换到 Formik Field,并且上面的工作方式不同。 <Formik initialValues={{ example: '' }} validate={(values) => { const errors = {}; if (!values.example) errors.example = 'Required'; return errors; }} onSubmit={this.handleSubmit} render={formProps => { return ( <Form> <Field type='text' name='example' /> <ErrorMessage name='example' /> </Form> ) }} /> 那么如果提交时输入为空,我该如何将输入的边框从通常的边框更改为红色? 解决方案 您可以设置 Field 提供的 ErrorMessage 和 Formik 组件的样式,就像在 React 中设置任何其他组件的样式一样。我在这里为您创建了一个工作演示:https://stackblitz.com/edit/react-formik-field-error-styles 看一下。继续阅读以获得解释。 说明 最简单的方法是使用 style prop: function getStyles(errors, fieldName) { if (getIn(errors, fieldName)) { return { border: '1px solid red' } } } ... <Field style={getStyles(formProps.errors, 'example')} type='text' name='example' /> ... 但是,如果您需要可管理的自定义,我建议您创建一个自定义组件。 Field 为您提供了 component 属性,您可以将自己的自定义组件分配给它,例如 CustomInput 或类似的东西: function getStyles(errors, fieldName) { if (getIn(errors, fieldName)) { return { border: '1px solid red' } } } function CustomInput({ field, form: { errors } }) { return <div> <input {...field} style={getStyles(errors, field.name)} /> <ErrorMessage name={field.name} /> </div> } ... <Field component={CustomInput} type="text" name="example" /> ... 当我使用 尝试 ErrorMessage 组件接受的答案中建议的技术时 <ErrorMessage name="propertyName" style={{ color: 'red'}}/> 它对我不起作用。当我将它封装在另一个容器中时它起作用了。 <div style={{ color: 'red'}}> <ErrorMessage name="propertyName" /> </div> 希望这对某人有帮助。 仅供参考,此处给出了适用于样式错误字段(例如边框)的解决方法: https://stackoverflow.com/a/66395574/1005607 令人惊讶的是,Formik 没有提供开箱即用的此功能,您必须使用自定义代码扩展 <Field>。 但一般来说,你不应该使用 Formik 自己的 <Field> 组件。相反,您应该将 Formik 连接到像 Material UI 或 React-Bootstrap 这样的组件库,它在其组件上公开 isInvalid={..} 或 error={..} 道具。这将允许您正确设置控件的样式。以下是如何将 Formik 连接到 React-Bootstrap 的示例: https://react-bootstrap.github.io/components/forms/#forms-validation-libraries 如果您在控件中键入内容,您将看到其如何样式根据错误而变化。 我基于 @gene b 使用 react-bootstrap 构建了一个组件。回答 它从 meta 钩子获取 useField 字段,并将最终错误传递给 isInvalid 属性: isInvalid={meta.touched && meta.error} 用于文本输入的完整组件: import React from 'react'; import { useField } from 'formik'; import Form from 'react-bootstrap/Form'; export default function TextInput (props) { const [field, meta] = useField(props); return ( <Form.Group controlId={props.name}> <Form.Label>{props.label}</Form.Label> <Form.Control name={props.name} isInvalid={meta.touched && meta.error} {...field} /> <Form.Control.Feedback type="invalid"> {meta.error} </Form.Control.Feedback> </Form.Group> ); }; 使用方法 import { Form } from 'formik'; import TextInput from './textInput'; <Form> <TextInput name="username" label="Username"/> </Form> 值得一提的是,还存在 isValid 属性,其工作方式完全相反,在有效字段上添加绿色标志。 在您的顶级 (S)CSS 文件中,粘贴 .formkit-outer[data-invalid] { .formkit-label, .formkit-messages { @apply tw-text-red; } input { @apply tw-border-red tw-outline-red; } } 为所有表单套件组件提供以下标签+错误输入: 注意,我使用了带有前缀“tw-”的顺风。您可以在这里使用您自己的课程。 /编辑:抱歉我读了 FormKit!但也许类似的方式可以帮助这里的其他人。我不会因为这个原因删除这篇文章。
React:Formik 表单中的 Material UI 单选按钮组重置不起作用
formik.resetForm() 正确重置值,但 Material UI 单选按钮组不会正确重置:最后选择的单选按钮保持选中状态。 如何重置单选按钮组
防止多步骤 Formik 表单在重新渲染上一步时重置表单控件输入
我正在尝试使用 formik 库在 nextjs 中实现多步骤表单。一切似乎都很好,除了当用户单击后退按钮时表单由于状态更改而重置。是...
TypeError:formik.getFieldProps 不是函数
我已经在我的 Nextjs 应用程序上添加了一个 Field 组件来使用 Formik,现在出现了以下错误消息: 服务器错误 类型错误:formik.getFieldProps 不是函数 此错误发生时
使用 Formik 与 Yup 和 React-select 进行验证
我正在使用 Yup 和 Formik 进行反应表单验证。 表单中有一个反应选择元素也需要验证。为了进行验证,我正在使用validationSch...
无法解析 formik/dist 中的 React - 自定义 webpack 配置
学习从头开始配置项目,但由于某种原因,webpack 似乎无法解析 formik 的模块 - 其他 3rd 方模块工作正常,例如样式组件。试图用谷歌搜索这个,但...