使用<;Field数组/>;中的自定义组件,通过表单<;字段/>;设置<;Textfield/>;的值。 [英] set value for <TextField/> through Formik <Field/> using custom component in <FieldArray/>
本文介绍了使用<;Field数组/>;中的自定义组件,通过表单<;字段/>;设置<;Textfield/>;的值。的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试通过使用map的索引来设置动态表单的默认值,以下是代码片段:
<Formik
initialValues={initialInputField}
onSubmit={(data) => handleSubmitForm(data)}
// validationSchema={validationSchema}
>
{({ values, handleSubmit, isSubmitting }) => (
<Form onSubmit={handleSubmit}>
<FieldArray name="processes">
{({ push, remove }) => {
return (
<div>
<Button
onClick={() => push(initialInputField.processes[0])}
className={classes.generateButton}
variant="outlined"
>
Add Process
</Button>
<div className={classes.root}>
{map(values.processes, (data, index: number) => {
return (
<div key={index}>
<Field
label="Process"
value={index} // add index as process value
name={`processes[${index}].process`}
component={Input}
/>
<IconButton onClick={() => remove(index)}>
<RemoveIcon />
</IconButton>
</div>
);
})}
</div>
</div>
);
}}
</FieldArray>
<Button
className={classes.generateButton}
variant="outlined"
type="submit"
>
Generate
</Button>
</Form>
)}
</Formik>
这是我的自定义组件的代码片段:
const Input = ({ field, value, label, form: { errors } }: any) => {
return (
<>
<TextField {...field} label={label} value={value} variant="filled" />
</>
);
};
问题是,当我提交表单时,尽管表单已经更改,但流程的所有值仍为&&;这是我的初始值
示例: (使用正确的值填写进程)
(我提交表单后进程仍然为空)
推荐答案
我认为这是因为您正在将";值";属性传递给输入组件并使用它。输入会将其显示为索引,但您没有执行任何操作来更改Formik状态。
您还可以将";field...";道具传播到输入上,该输入也具有";Value";。您需要的是field.value而不是您的值属性,这样您就可以在您的输入中实际反映formik的状态。我认为这将是一种更好的做法,而且不那么痛苦,只需预先创建此数据并将其传送到Forik InitialValues道具中。
否则,您可以在输入组件的init中处理它,将defaultValue属性传递给它(Index),使用form.setFieldValue(Form是字段提供的属性)在不存在field.value的情况下使用defaultValue更新formik状态。
这篇关于使用<;Field数组/>;中的自定义组件,通过表单<;字段/>;设置<;Textfield/>;的值。的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文