我使用formik作为表单实现。当您在上面的行中添加数据时,我们需要追加一个新的字段行。在提交表单时,我们将得到yup验证错误,因为新添加的行不符合条件。请建议跳过新添加的行(最后一行)的验证的解决方案。
This is the validation schema
Yup.object().shape({
key1: Yup.object({
key2: Yup.object({
key3: Yup
.array()
.of(Yup.object().shape
重要:安装旧版本的Formik可以消除此错误。我用npm install formik@2.0.7 --save 来解决这个问题。从2.0.8开始,bug回来了.
我第一次尝试使用Formik,并且遵循一个指南,但是将它应用到我的表单中,在表单中,我的div和输入有不同的类,布局也不同,但我不认为这是问题所在。
我在谷歌上找不到有这个错误的人。我将从文件中添加整个代码,因为其中一些问题可能是由于导入造成的。
这是来自浏览器控制台的错误:
Warning: An unhandled error was caught from submitForm() TypeError: Function ha
我一直在努力用我的简单形式来编写测试:
import { useFormik } from 'formik';
import * as yup from 'yup';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import dayjs from 'dayjs';
import Stack from '@mui/material/Stack';
import {
这看起来可能很长,但这只是因为我想确保提供我所拥有的所有信息。因此,我在react组件中有一个Formik表单,它处理几个文本输入和几个文件上传。我在React类组件中使用了这个Formik组件: <Formik
initialValues={{
...initialValues, //no need to list them all here
affiliateLogo: null,
}}
validationSchema={validationSchema}
onSubmit(values=>{//do something with the v
我已经创建了一个单独的组件,它将在其中呈现一张带有表单的卡片。我使用Formik来处理它。这是我的密码。
function ParentComponent(){
return (
<View>
<ChildComponent someDataFromApi={details}/>
</View
)
}
import { Formik } from "formik";
import * as Yup from "yup";
function ChildCom
我到处找过了,不确定这是否可能。本质上,我希望使用不是表单值的状态钩子来验证带有YUP的formik表单。
validationSchema={Yup.object({
comments: Yup.string()
.when(approvalState, {
is: false,
then: Yup.string().required('Comments are required when denying an approval.'),
我使用的是Formik React表单和在模式上定义的Yup验证:
export const Contact = yup.object<IContact>().shape({
contactName: yup
.string()
.trim('The contact name cannot include leading and trailing spaces')
.strict(true)
.min(1, 'The contact name needs to be at least 1 char')
.m
我是新的反应,特别是形式。我试图学习如何创建一个登录表单使用formik,将显示一个标签,称为电子邮件输入电子邮件。带有密码输入的名为password的标签和名为submit的按钮。
我的问题是,只有两个输入和提交按钮显示在浏览器中。电子邮件和密码的两个标签在浏览器中不显示。请告诉我怎么解决这个问题。
App.js:
import React from 'react';
import './App.css';
import FormikContainer from './components/FormikContainer';
import Lo
我有一个表单,它有一个字段items,它用属性image和name存储一个对象数组。image属性接受一个文件,但它是可选的,name字段是必需的。
由于某些原因,当我触摸name字段时,图像字段验证就会启动,它会抛出错误"Image太大“,这可以从formik的错误对象中看到。我不明白为什么会这样。下面是组件的代码和代码框,您可以在这里查看
import React from 'react';
import { Formik, Field, FieldArray } from 'formik';
import * as Yup from 'yu
我有一个输入字段(类型文件),由于某种原因,即使不是必需的,也会进行验证。对于序列号,我有一个验证,它不是必需的,而且似乎工作正常,在提交空字段时没有错误。对于文件输入字段,我只希望输入字段在上传文件时验证。我做错了什么?,当我点击submit测试验证时,我得到了这个(见下图)。
这是我的密码:
const validationSchema = Yup.object({
title: Yup.string()
.required("Title is required")
.min(8, "Title must be at least 8
我有一个带有一些输入的简单组件,我正在尝试验证在单击按钮后是否调用了模拟函数。 以下是我在测试文件中尝试的内容: import React from 'react'
import { mount } from 'enzyme'
import AddUser from '../Components/AddUserWithFormik'
import { Router } from 'react-router-dom'
import { createBrowserHistory } from 'history'
im
我想将material-ui添加到我的formik应用程序中。我使用formik-material-ui库(https://github.com/stackworx/formik-material-ui)来做这件事。但是,当我将material-ui textfield组件插入到字段中时,在提交之前会触发验证。我的直觉是这是一个mapStateToProps问题,但我不确定如何将它集成到我的代码中,因为关于它的文档并不多。 任何帮助都非常感谢,谢谢! import React from 'react';
import * as Yup from 'yup';