formik 相关问题

无法上传与graphql上传和formik文件

我试图上传通过Formik作出反应，悬浮窗的图像。当我把这个形象，我用它来预览它在IMG的HTML，它的伟大工程。当我点击发送，预览对象只...

如何构建我的高阶组件与反应，和/终极版/ Formik和烨？

我有2点独立的意见。他们都使用相同的形式。形式生活在一个模式。形式完美的作品的第一个视图（创建模式）内。现在我想再添一个，对于（编辑...

如何访问值从选择做出反应，并通过他们向Formik值上提交？

我想访问我的阵营，选择元素值，将它作为价值在了OnSubmit功能，并添加到从formik收集的值。我在Formik创建一个多元素的形式。我访问...

如何使用formik在表单中编辑表单

var fname，gender，city =“”; this.props.data.map（（row，index）=> {// console.log（index）; if（this.props.selectedVal === index）{性别= row [0]; fname = row [1 ]; city = row [2] ...

如何在React / Formik选择组件上显示占位符值？

我有一个下拉选择组件。此组件显示我们从服务器获取的元素的值。在以下架构中：[{label：1，value：1}，{label：2，value：2}，{...

将值传递给formik中的状态

我在反应应用程序中使用formik表单。 class myComponent extends Component {constructor（props）{this.state = {inputData：{}}} render（）{return（ {（{...

如何使用Enzyme和Jest测试Formik Fields？

我想测试是否使用Enzyme渲染特定类型的输入字段。我正在使用Formik，用于我的表格。但每次我为特定用例编写测试时，我都会遇到这个奇怪的对象错误......

如何在Yup中验证非必填字段

如何验证不需要包含以下特殊字符的非必填字段＃和点（。）之前的空格我有正则表达式\`| \＃| \＆| \以验证上面...

如何使用yup验证非必填字段

我正在使用yup和formik进行验证。我想用yup验证一个非必填字段。这里test是一个非必需字段，但是当用户输入时我们阻止他输入一些特殊字符....

反映故事书显示有错误的formik形式

强制formik表单显示错误字段的最简单方法是什么？我希望这能用于反应故事书，以显示当字段中存在错误时我们的表单是什么样的。我的每个领域......

Formik表单提交反应测试库

我想要为LoginForm触发提交处理程序。但是，出于某种原因，不是调用我的mock函数，而是触发组件的实际处理程序（调用外部api）。 ...

如何在YUP中选中三个复选框时进行验证？

我有三个复选框：[*]选项一[*]选项二[*]选项三只有在检查了所有三个时才有效状态。所有其他状态无效，应显示错误消息。如何 ...

如何用烨验证最小年龄？

我创建了一些registrationSchema导出const registrationSchema =（translate）=> Yup.object（）。shape（{// ...其他经过验证的属性.//例如用户名...

Formik使用React Native Switch

我的目标是在Formik表单中使用基于Switch（来自React Native）的自定义组件。以下是表单组件的代码：class NewPreferences extends React.Component {render（）{...

使用Yup和Formik进行条件验证

这是我的验证模式：const validationSchema = Yup.object（）。shape（{person：Yup.object（）。shape（{name：Yup.string（）。required（'Field is required'），姓：Yup。串（）....

如何使用带有formik的antd设置和获取datepicker值？

在这里，我使用antd创建Datepicker并将此antd datepicker传递给formik字段。我使用antd import的Datepicker示例代码来自“react”的React;从“......导入{Form，DatePicker}

如何在提交值后重置kendo datepicker？

在这里，我提供了我在codeandbox上工作的示例。提交表单后如何重置datepicker值？ state = {setFieldValue：''} onChange =（setFieldValue）=＆...

如何在反应选择中分配对象验证（单选）

我正在尝试使用yup概念实现react-select（单选）的验证。但我收到此错误：对象作为React子对象无效（找到：具有键{label，value}的对象）。 ...

React Formik Field onChange 事件句柄

我正在尝试处理 React Formik 中 Field 组件的 onChange，但它不起作用。我还尝试通过以下方式在 Formik 组件之外处理它： handleChange(e) { console.log('改变'); } 我正在尝试处理 React Formik 中 Field 组件的 onChange，但它不起作用。我还尝试通过以下方式在 Formik 组件之外处理它： handleChange(e) { console.log('changing'); } <Field type="radio" name="players" value="1" onChange={e => this.handleChange(e)}/> 但我收到警告： 组件正在将不受控制的文本类型输入更改为 受控。输入元素不应从不受控制切换到 受控（反之亦然）。 现在我的代码是这样的： <Formik onChange={() => { console.log('changing'); }} onSubmit={(values) => { console.log('submitted'); }} > {({ isSubmitting, handleChange }) => ( <Form> <InputWrapper> <span>1</span> <Field type="radio" name="players" value="1" onChange={handleChange}/> <span>2</span> <Field type="radio" name="players" value="2" onChange={handleChange}/> </InputWrapper> <button type="submit" disabled={isSubmitting}> {isSubmitting ? 'Loading..' : 'Start'} </button> </Form> )} </Formik> 任何提示/想法？ 我发现将 onBlur:handleBlur 引入您的 Formik 字段的一个问题是它覆盖了 Formik 验证。 使用onKeyUp={handleChange} 这解决了上述问题 您必须像下面这样使用 Field 的 InputProps... import { TextField } from 'formik-material-ui'; <Field type="radio" name="players" value="2" component={TextField} InputProps={{ onBlur:handleBlur }}/> 要在 Field 中使用 InputProps，您需要使用 formik-material-ui 库中的组件 TextField。 另一种方法是使用 onKeyUp 或 onKeyDown，这些功能可以与 Field 一起使用，并且功能类似于 onChange <Field type="radio" name="players" value="2" onKeyUp =this.handleChange/> 我发现了一个对我很有效的技巧，你可以使用 formik 的“值”并调用一个将“值”作为参数传递的方法并使用新值执行操作。 const handleUserChange = (userId: number) => { //userId is the new selected userId }; <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit} enableReinitialize > {({ isValid, isSubmitting, values }) => ( <Form> <table className="table"> <tbody> <tr> <td>Users</td> <td> <Field name="userId" className="form-control" as="select"> <option value="">--select--</option> {data.Users.map((user, index) => ( <option key={user.id} value={user.id}>{`User ${index + 1}`}</option> ))} </Field> </td> </tr> {handleUserChange(values.userId)} </tbody> </table> <div className="row"> <div className="col-sm-12"> <SubmitButton label="Save" submitting={isSubmitting} disabled={!isValid || isSubmitting} /> </div> </div> </Form> )} </Formik> <Grid item xs={12}> <Field type="email" name="email" as={FormField} label="Email *" validate={validate} value={emailId} onChange={e => { setFieldTouched('type'); handleChange(e) }} /> <MDBox> <MDTypography component="div" variant="caption" color="error" fontWeight="regular"> {<div style={{ cursor: 'pointer', marginTop: styleMt }} onClick={emailStatus != 'ACTIVE' ? handleRestore : ''}>{errorMessages}</div>} </MDTypography> </MDBox> </Grid>

如何将状态值传递给form j中的formik中的初始值

我在我的反应应用程序中使用了formik库。最初，我在构造函数中声明了状态值，在componentDidMount中，我正在使用该应用响应调用API来更新状态值，Can ...