- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个表单,每次单击提交按钮时,它都会抛出此错误:“无法读取未定义的属性‘handleReset’”。这是我的代码。
import React, { Component } from "react";
import { withFormik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
class MyForm extends Component {
state = {
myDetails: [
{ name: "name", type: "text", placeholder: "enter your name" },
{ name: "email", type: "email", placeholder: "enter your email" },
{
name: "password",
type: "password",
placeholder: "enter your password"
},
{ name: "dept", type: "text", placeholder: "enter your department" }
]
};
render() {
return (
<React.Fragment>
<Form>
{this.state.myDetails.map((detail, i) => (
<div key={i}>
<Field
name={detail.name}
type={detail.type}
placeholder={detail.placeholder}
/>
<ErrorMessage name={detail.name} />
</div>
))}
<button type="submit">Submit form</button>
</Form>
</React.Fragment>
);
}
}
const myFormik = withFormik({
mapPropsToValues({ name, email, password }) {
return {
name: "",
email: "",
password: ""
};
},
validationSchema: Yup.object().shape({
name: Yup.string().required(),
email: Yup.string()
.email()
.required(),
password: Yup.string().required()
}),
handleSubmit: values => {
console.log(values);
}
})(MyForm);
export default MyForm;
我该如何解决。我一直在为此苦苦挣扎,但找不到答案。
最佳答案
我已经看到了错误,我应该导出包装器“MyFormik”,但我导出了“MyForm”。
关于reactjs - HandleReset 在 formik 中使用 react 时抛出错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60698900/
我需要用 formik 或 yup 来验证动态创建的字段。我已经在 jquery validatioh here 中看到了这个验证。 对此 我的代码在这里 https://codesandbox.io
我有一个带有一些文本输入和一些自定义组件的表单。我已经对文本输入进行了 Formik 验证,但对自定义组件没有进行验证。我现在正尝试将 Formik 验证添加到我的自定义 categoriesMult
我有一个通过 Formik 输入的数字,但即使它通过了 Formik 验证,生成的输入仍归类为 string 。 {({ va
我有一个 formik 表单如下。我能够在 formik 组件中提交表单。但是我怎么能在 formik 组件之外提交它(对于这个例子来说是在页脚按钮内)。 Formik 网址:Click here 特
我们有自己的输入组件(例如 Checkbox 、 Textbox ,甚至 CurrencyInput 组件) 我们现在使用Formik 。所以我们替换了所有 { ... return (
当前行为 (this.form = node)} onSubmitCallback={this.onSubmitCallback} render={formProps => {
在 formik , 属性(property)内 onChange ,有时 onChange = {formik.handleChange}有时被称为 onChange = {v => formik.
我正在使用 Yup 来验证我的 Formik 表单,但我不知道如何在 Yup/Formik 中验证 radio 输入。 最佳答案 您验证 radio 组。唯一可能的验证失败是,如果您没有选择默认按钮,
我正在使用 formik 和 @jbuschke/formik-antd。我需要将掩码 +7 (___) ___-__-__ 应用于输入,因此我想使用 react-input-mask。 同时我需要解
我正在尝试使用位于 外部的外部按钮提交表单或标签 如下面的屏幕截图所示,我的按钮位于 Bootstrap > 模态页 footer 分,并且它们位于表单标记之外。当用户单击 Submit 时,我尝试
我正在尝试使用 React、Formik、react-select 和 Firebase(云 firestore)在 React 中构建表单。 当我只使用一次 react 选择时,一切正常。只有一种状
我有客户对象,其中有一系列与之关联的信用卡,如下所示: { "_id":"5d63e3a32f093f2b5e41ef96", "firstName": , "lastName": ,
我正在开发一个单独的模块,该模块旨在包含支持 HTML 输入元素的 formik。 问题是我无法使用 useFields()钩子(Hook),因为我的模块组件没有连接到 formik 上下文。 这是我
我正在尝试重置表单中的所有错误。 我尝试使用 setErrors和 setStatus ,这些都不起作用。 Formik 状态中的错误未清除。 setErrors({errors: {}}) 和 se
当我打开屏幕时,在我第一次提交表单之前我没有看到任何验证错误。正确输入电子邮件地址并通过点击按钮提交表单后,表单逻辑将正常工作。显示警报并重置字段(有意) 但是,一旦我关闭警报,Formik 仍然向我
我有以下表格: import React from 'react' import PanelInputField from './form_components/panel_input_field'
我有以下 Formik 表格 { console.log(JSON.stringify(values)); setSubmitting(true); fetch('/logi
我一直在尝试在 React 中重写我的初学者表单以使用 Formik。 我已经进入正在呈现表单的状态,但是,由于某种原因,我无法更新字段。很明显,我在某个地方犯了一个错误,导致 Formik 无法更新
我想在 formik 中使用 yup 验证我的表单。假设我有 4 个字段 A、B、C、D,它们都是字符串。如果我想让至少一个字段不为空,我应该如何编写验证模式,那么这是一个有效的表单?提前致谢! 最佳
我在 reactjs 中使用 formik 进行表单管理,我有一个关于验证的问题。 我有两个字段,一个是选择国家的选择控件,另一个是邮政编码。 在 country 数组中,我们有正则表达式来验证邮政编
我是一名优秀的程序员,十分优秀!