formik 相关问题

React-Bootstrap 无线电输入作为带有 formik 的按钮组

我正在尝试让单选按钮显示为按钮组，其中按钮是/否作为可重复使用的反应组件，也使用 formik。 const 布尔输入 = ( 道具：{标签：字符串；尺寸：数量 } &a...

使用 formik 进行复杂的嵌套数组验证

我已经查找过与此相关的任何类似问题，但一无所获。基本上我使用 formik 来管理测验的问题。我正在使用 FieldArray 动态添加问题文本...

如何通过外部操作更新 Formik Field

我正在尝试从模式屏幕更新 Formik 字段。模态返回数据并将它们设置到 pageState 中。考虑到我的 Fomik Form 有“enableReinitialize”，字段更新有效...

如何在 React Native 文本输入中添加逗号分隔符

我正在开发一个 React Native 应用程序。我在我的表单中使用 Formik。现在我的要求是我有一个 TextInput，用户可以在其中输入价格。此输入字段应添加逗号分隔符 1...

在ReactJS中使用useFormik时如何使用uuid作为item ID？

我使用 useForm 在 ReactJS 中提交表单。 在 useForm 中，我们定义了带有空白内容的初始值。 对于输入，我们使用值，例如： 值={formik.values.bookName} 我想分配id...

不确定如何将 Radio 组添加到也使用材料 UI 的预先存在的 Formik 表单中

我是 REACT 新手，我正在尝试通过修改现有示例来学习：这里我正在遵循使用 Formik 和 Material UI 的教程，我正在努力将文本输入框更改为...

Formik 的“isValid”报告 true，即使验证模式报告错误

看起来 Formik 的标志“isValid”在某些情况下被设置为 true，即使表单值不应被视为有效。我下面有一个工作的codesandbox示例，这是...

为什么 React 在 router.push("/") 之前渲染表单一秒钟

这是我的登录页面（我使用 Next.js 14）。 当 setSubmitting true - 在页面上加载微调器渲染时，但由于某种原因，在页面实际路由到/主页之前 isSubmitting 变成了 false...

React Formik enableReinitialize 强制 props.touched 值重置

我有一个从后端获取的数据： fetchUserData = async () => { ...获取数据 this.setState({ 用户名：resp.data.data.uname }); } 我想要 F...

Formik 导致 MUI 数字文本字段失去焦点

当我将 formik 值绑定到类型为“数字”的文本字段时，任何手动输入数字的尝试，例如文本字段中的 14 允许您输入单个数字，例如1 然后它失去焦点......

为什么 Formik 永远无法识别我的 Ionic IonInput 值？

我正在使用 Ionic 7、React 18 和 Formik 2.4.5。 Ionic 可以与 Formik 一起使用吗？我尝试创建一个非常简单的表单，只有名字和姓氏...... const MyComponent：React.FC 我正在使用 Ionic 7、React 18 和 Formik 2.4.5。 Ionic 可以与 Formik 一起使用吗？我尝试创建一个非常简单的表单，只有名字和姓氏...... const MyComponent: React.FC<MyComponentProps> = ({ }) => { const validationSchema = Yup.object({ firstName: Yup.string().required('First Name is required'), lastName: Yup.string().required('Last Name is required') // Add other fields to validate here }) return ( <Formik initialValues={{ firstName: null, lastName: null }} validationSchema={validationSchema} onSubmit={(values) => { alert(JSON.stringify(values, null, 2)) }} > {(formikProps) => ( <> <strong>Sender Information</strong> <form onSubmit={formikProps.handleSubmit}> <IonInput placeholder='First Name' value={formikProps.values.firstName} onIonChange={formikProps.handleChange} /> {formikProps.touched.firstName && formikProps.errors.firstName ? <div>{formikProps.errors.firstName}</div> : null} <IonInput placeholder='Last Name' value={formikProps.values.lastName} onIonChange={formikProps.handleChange} /> {formikProps.touched.lastName && formikProps.errors.lastName ? <div>{formikProps.errors.lastName}</div> : null} <button type='submit'>Submit</button> </form> </> )} </Formik> ) } export default MyComponent 但是，即使我在其中输入了文本，单击“提交”总会导致显示错误消息。当我删除“validationSchema”属性时，我看到我的提交处理程序被调用，但是，即使我在其中输入了文本，这两个字段的值也始终为空。很好奇 Formik 是否适合与 React 一起使用。 是的，Formik 可以与 React 和 Ionic 一起使用来管理和验证表单状态。您在共享代码中遇到的问题与 onIonChange 组件处理 IonInput 事件的方式有关。 onIonChange提供的事件对象与标准React onChange事件不同。结果，Formik 无法正确捕获更改，导致显示验证消息和提交表单时出错。 现在，要解决此问题，onIonChange事件处理程序应使用Formik的setFieldValue函数，该函数会在事件触发时手动更新字段值。此外，我还向 IonInput 组件添加了 name 属性。 <IonInput name='firstName' placeholder='First Name' value={formikProps.values.firstName} onIonChange={(e) => formikProps.setFieldValue('firstName', e.detail.value)} /> {formikProps.touched.firstName && formikProps.errors.firstName ? ( <div>{formikProps.errors.firstName}</div> ) : null} <IonInput name='lastName' placeholder='Last Name' value={formikProps.values.lastName} onIonChange={(e) => formikProps.setFieldValue('lastName', e.detail.value)} /> {formikProps.touched.lastName && formikProps.errors.lastName ? ( <div>{formikProps.errors.lastName}</div> ) : null} 代码演示 建议： 您还应该考虑查看 React-hook-forms 库。它重量轻，正在慢慢取代Formik。

Formik 在渲染新闻之前保留 ols 值

我使用的是 React Native，有两个文件：EditGiftScreen.js，它呈现页面以编辑礼物；GiftForm.js，它呈现表单。我还将它用于我的 AddGiftScreen.js 与不同的

如何提高React Form性能（使用Formik）？

在具有许多输入（例如 40 个字段）的 formik 表单中，我可以看到该表单很慢。 这是我的 formik 配置： const formik = useFormik({ 启用重新初始化：true， 初始Va...

如何在Formik表单的输入字段上设置自动聚焦？

我正在尝试使用 React 在 Formik 表单中的输入字段上设置自动焦点。这样做的标准方法是什么？ 我的代码如下： 我正在尝试使用 React 在 Formik 表单中的输入字段上设置自动焦点。这样做的标准方法是什么？ 我的代码如下： <img src="images/barcode-small.png" alt="Barcode Small" /> </td> <td> <Field name="barcode1" type="text" className="p-inputtext" autocomplete="off" style={{ width: 250 }}/> </td> 我尝试简单地将 autoFocus 属性添加到字段中，但这似乎不起作用。 在我的开发工具中，我收到以下错误： 如何检查是什么挡住了焦点？ 谢谢 您可以简单地使用 TextInput 来执行此操作，就像我所做的那样 只需添加一个属性 <TextInput autoFocus={true} /> 然后查看结果 您可以将 useEffect 与 document.getElementByName 结合使用。这是方法； 使用空括号仅运行一次 useEffect： useEffect(() => { document.getElementsByName("name of your formik element")[0].focus(); // following is optional return () => { formik.resetForm(); } }, []); 对于未来的人们： 我在这个问题中使用了 React 类组件。我设法通过添加处理焦点的方法解决了这个问题。通过 DOM 中的 ID 获取元素。 focusChange(nextField) { if(document.getElementById(nextField) === null){ return; } document.getElementById(nextField).focus(); } 然后在类的渲染方法中我检查了一个关键事件。键码 13（输入）检查是为了防止提交表单。 const onKeyDown = (keyEvent) => { if ((keyEvent.charCode || keyEvent.keyCode) === 13) { this.focusChange(this.state.nextBarcode); keyEvent.preventDefault(); keyEvent.keyCode = 9; } } 我将该方法添加到我的 Formik 表单中： <Form onKeyDown={onKeyDown}> 来自 PrimeReact 的实际输入字段如下所示： <InputText className="p-inputtext" id='barcode4' onChange={(e) => this.setState({barcode4: e.target.value, nextBarcode: 'barcode5'})} value={this.state.barcode4} style={{ width: 250 }} /> 所以我的解决方案是document.getElementById("myID").focus(); 要让 Formik Field 组件自动对焦，请将 autoFocus 属性添加到 Field 组件，如下所示： <Field autoFocus={true} type="text" name="barcode1" />

如何消除异步表单/是的验证，当用户停止输入数据时它将进行验证？

我想异步验证用户输入。例如，检查电子邮件是否已存在，并在用户键入时执行验证。为了减少 API 调用，我想使用 ...

Formik 未捕获类型错误：无法读取未定义的属性“getFieldProps”

我正在使用 Formik 创建表单。当我以其中一种形式使用 FieldArray 时，出现错误 Field.tsx:81 Uncaught TypeError: Cannot read property 'getFieldProps' of undefined 为了验证我是否这样做...

React 中的错误：通用类型“DatePickerProps”需要 1 个类型参数

日期选择器组件： 从“反应”导入反应 从 '@mui/lab/AdapterDateFns' 导入 AdapterDateFns； 从'@mui/lab'导入{LocalizationProvider}； 导入 { DatePicker, DatePickerProps }

为什么我的 Yup 验证条件出现错误？

我正在开发一个 TypeScript 项目，我使用 Yup 进行表单验证。我遇到了 when 函数和 is 条件的问题。 TypeScript 抛出错误 (TS2769) 相关...

为什么我的 Yup 验证条件出现错误？

我正在开发一个 TypeScript 项目，我使用 Yup 进行表单验证。我遇到了 when 函数和 is 条件的问题。 TypeScript 抛出错误 (TS2769) 相关...

在 Formik 中设置单选按钮组的初始值

我正在使用最新版本的反应表单库，称为 Formik (2.1.5)。 这非常好，但我在初始加载时遇到了单选按钮组的问题。 当我第一次加载表格时，我...