reactjs相关内容
我尝试使用Formik库来验证表单,但在将Change函数传递给输入组件时遇到问题。 以下是主要组件: import React from 'react'; import { IonHeader, IonContent, IonToolbar, IonTitle, IonButton, IonPage, IonList } from '@ionic/react'; import
..
我使用的是名为Formik(2.1.5)的最新版本的Reaction表单库。 它相当不错,但我在初始加载时遇到了单选按钮组的问题。 当我第一次加载表单时,我设置了一组初始值。 当我执行console.log并且所有数据都在那里时,我可以看到它们。 我的输入域和文本域完美地加载了初始值。 但是我的单选按钮组没有显示应该选择哪个单选按钮。 以下是我的单选按钮组代码:
..
我的表格如下 const NewProduct = ({}) => { const validate = (values) => { const errors = {} if (!values.title) { errors.title = 'Required' } return errors
..
我正在尝试通过使用map的索引来设置动态表单的默认值,以下是代码片段: handleSubmitForm(data)} // validationSchema={valida
..
我这里的产品可能有一个或多个图像。具体取决于ProductCode。 如果ProductCode为,则它们属于同一产品。可以在图像的文件名上找到ProductCode,它在第一个下划线之后。例如,如果文件名为AA_BB_CC.jpg。ProductCode为bb。 您可以查看“我的代码”框中的样本图像。 因此,如果图像具有相同的ProductCode,它应该加起来就是产品。我的问题是在
..
我想提出两个条件:如果isProduct或isBox为真,则product_id应该是必需的。我在下面执行了此代码,但它不起作用 product_id: yup.string().when(['isProduct', 'isBox'], { is: true, then: yup.string().required('Select product'), }), 推荐
..
有一个基本的Formik表单: { setTimeout(() => { alert(JSON.stringify(values, nul
..
我有一个我的用户请求的表单,我清楚地表明该表单是无效的。因此,我计划弹出一个sweetalert对话框,让他们知道他们需要再次检查表单。我想我可以在验证中这样做,以便在提交尝试失败时向他们发出警报: const validate = values => { console.log(formik.isSubmitting); // always prints false con
..
我有一个反应表格, 在有选择字段的地方, 假设该字段具有值A、B、C、D、E、F。 现在假设,另一个字段ChooseSubType只有在我选择B或D时才会显示,并且此字段仅在显示时是必填字段,而不是在此之前。 现在,我如何才能做到这一点? 以下是第一个字段的代码,即选择字段 chooseAlphabet: Yup.string().required('field requi
..
问题: 我在Reaction中选择了Formik表单中的输入。我的代码如下
..
我正在使用Formik用于React应用中的一个小表单。 方法handleSubmit在用户按Enter键时触发。 有什么方法可以防止这种触发吗? 我在以前的文档中没有找到任何东西... 谢谢。 推荐答案 您可以按如下方式添加onKeyDown处理程序: /** * Stop enter submitting the form. * @param keyEv
..
我正在尝试使用Reaction和Formik进行验证。我希望实现最大位数仅为2,最大范围仅为12。 expiryMonth: yup.string().required('Select month').max(2, 'Invalid month format (Example: 06)'), 推荐答案 您可以使用此命令: yup.string() .required("S
..
我正在尝试使用材料UI切换按钮,有点像单选按钮,为用户提供对给定问题的两个选择。 它基本上可以正常工作,但当尝试调整每个切换按钮被选中时的样式时,我无法更改切换按钮的背景颜色。我在ToggleButton组件上使用了CLASS属性,并在该属性中使用了";SELECTED&QOOT;规则。 某些css属性(如pding&;boxShadow)可以正常工作,但其他属性(包括背景颜色)则
..
我在一个用Yup验证的Formik表单中使用了Reaction-Datepicker。为了将Reaction-Datepicker集成到Formik中,我使用了wrapper solution in this thread。 最初输入值时,将检查.required(),但不会检查其他任何验证。因此,我不会立即获得StartDate later than today验证。如果我再次进入该控件并
..
如何将取消退回应用于下面的异步验证(code from Yup's github)? let asyncJimmySchema = string().test( 'is-jimmy', '${path} is not Jimmy', async (value) => (await fetch('/is-jimmy/' + value)).responseText === 'tru
..
我想使用formik进行异步验证,并使用yup进行验证架构,但我找不到示例或演示。 推荐答案 const validationSchema = Yup.object().shape({ username: Yup.string() .test('checkDuplUsername', 'same name exists', function
..
是否有用于验证特定长度的yup函数? 我尝试了.min(5)和.max(5),但我想要确保数字正好是5个字符(即邮政编码)的内容。 推荐答案 我不认为有任何内置的东西,但它很容易用test实现: yup.string() .test('len', 'Must be exactly 5 characters', val => val.length === 5) htt
..
我有一个由formik控制的表单,当我填写所有字段并按下提交按钮时,函数onSubmit被调用,并且我的表单将重置此值。 有时我的数据不正确(如重复的电子邮件),我需要保存此数据。 如何执行此操作? 这是我的代码: const schema = Yup.object().shape({ login: Yup.string()
..
我对前向裁判使用Forik形式,如下所示 Form.js import React from "react"; import FormikWithRef from "./FormikWithRef"; const Form = ({ formRef, children, initialValues, validationSchema, onSubmit }) =>
..
我正在尝试使用Yup的.test()方法在Formik中进行异步验证,并且需要设置从API获得的错误消息。根据后端的某些情况,错误消息会有所不同。 尝试了这里提到的几种解决方案 https://github.com/jquense/yup/issues/222和Dynamic Validation Messages Using Yup and Typescript 但Yup正在抛出t
..