react表单不会捕获输入到formik fieldarray中
react表单不会捕获输入到formik fieldarray中
提问于 2022-01-31 19:23:28
我发送涉及formik中的字段数组的代码片段，问题是:一方面要添加和删除字段的按钮正确工作，另一方面它们工作的文本框，因为您可以在其中输入数据，但是当表单提交时，不发送包含在字段中的文本框中输入的数据，谢谢。
表单的初始值
const formik = useFormik({
initialValues: {
no_doc: '',
apellido: '',
nombre: '',
fec_nac: '',
sexo: '',
domicilio: '',
no_tel: '',
email: '',
obra_soc: '',
no_obra_soc: '',
plan_obra_soc: '',
fec_prot: Date.now.toString(),
medico: '',
diagnostico: '',
medicacion: '',
practicas_solicitadas: '',
practica_s: [
{
cod_ana: '',
autorizada: '',
obra_soc:''
}]
},
onSubmit: (data) => {
// setFormData(data);
setShowMessage(true);
console.log(data);
formik.resetForm();
}
});Formik FieldArray码
<FormikProvider value={formik}>
<FieldArray name='practica_s'>
{({push, remove, Formik }) => (
<React.Fragment>
{formik.values.practica_s.map(( practica_s , index) => (
<Grid container item>
<Grid item>
<Field name={`practica_s[${index}].cod_ana`}
id="practica_s.cod_ana"
component= {Autocomplete}
sx={{ width: 300 }}
autoHighlight
value= {practicas.cod_ana}
options={practicas}
getOptionLabel={(option) => option.nom_ana}
renderInput={(params) => <TextField {...params} label="Practica" />}/>
</Grid>
<Grid item>
<Field name={`practica_s[${index}].autorizada`}
id="autorizada"
component= {TextField}
label= "Autorizada ?" />
</Grid>
<Grid item>
<Field name={`practica_s[${index}].obra_soc`}
id="obra_soc"
component= {TextField}
label= "Obra Social" />
</Grid>
<Grid item>
<Button onClick={() => remove(index)}>Delete</Button>
</Grid>
</Grid>
))}
<Grid item>
<Button type='button' onClick={() => push({cod_ana:'', autorizacion:'', obra_soc:''})}>Add</Button>
</Grid>
</React.Fragment>
)}
</FieldArray>
</FormikProvider>回答 1
Stack Overflow用户
发布于 2022-02-02 01:57:17
最后，在@Thremulant的帮助下，我重新制定了"Fieldarray代码“，以便一切都能正常工作。基本上，在外地，“组件”选项已更改为"as“选项。另一方面，我重写了“自动完成”字段的代码，以便当选择更改时，可以将一个不同的值传递给FieldArray的“字段”，而不是select显示的“字段”，我等待评论，并提前感谢所提供的帮助。
<FormikProvider value={formik}>
<FieldArray name='practica_s'>
{({push, remove, Formik }) => (
<React.Fragment>
{formik.values.practica_s.map(( practica_s , index) => (
<>
<div className="p-col-12 p-md-3">
<Autocomplete
id="practicas"
name="practicas"
options={practicas}
getOptionLabel={option => option.nom_ana}
onChange={(e, value) => {
formik.setFieldValue(`practica_s[${index}].cod_ana` , value.cod_ana)
}}
renderInput={params => (<TextField {...params}
name={`practica_s[${index}].autorizada`}
label="Prtacticas"
variant="outlined"
/>
)}
/>
</div>
<div className="p-col-12 p-md-3">
<div className="p-inputgroup">
<Field name={`practica_s[${index}].autorizada`}
id="autorizada"
as= {InputText}
label= "Autorizada ?" />
</div>
</div>
<div className="p-col-12 p-md-3">
<div className="p-inputgroup">
<Field name={`practica_s[${index}].obra_soc`}
id="obra_soc"
as= {InputText}
label= "Obra Social" />
</div>
</div>
<div className="p-col-12 p-md-3">
<Button onClick={() => remove(index)}>Delete</Button>
</div>
</>
))}
<div className="p-col-12 ">
<Button type='button' onClick={() => push({cod_ana:'', autorizada:'', obra_soc:''})}>Add</Button>
</div>
</React.Fragment>
)}
</FieldArray>
</FormikProvider>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70931703
复制相关文章
相似问题
腾讯云开发者
