在使用React & Formik单击窗体内的按钮时，如何添加< />？
在使用React & Formik单击窗体内的按钮时，如何添加< />？
提问于 2020-07-23 20:32:28
当在表单中单击按钮时，我需要找到一种方法来添加Formik的<Field /> (键入select)。我在试着理解文档中给出的示例，但我不明白。
我的React代码(我完全理解并看到这并不是我想要的那样工作，但这就是我现在所拥有的)：
const dummyNorms = {
normas: [
{ label: 'Norma 1', value: 'Norma 1 seleccionada' },
{ label: 'Norma 2', value: 'Norma 2 seleccionada' },
{ label: 'Norma 3', value: 'Norma 3 seleccionada' },
],
};
<FormGroup>
{/* ANCHOR Add Norm */}
<FieldArray
name='dischargeNorms'
render={(arrayHelpers, index) => (
<div>
<label>Norma de evaluación de descarga</label>
{
dummyNorms.normas.map(() => (
<div key={`norm-${index}`}>
<Field
name={`norm-${index}`}
type='select'
component={DUIKSelect}
options={
dummyNorms.normas
}
/>
</div>
))
}
<button
className='modal__addBtn'
onClick={() => arrayHelpers.insert(index, '')}
type='button'
>
<span className='btn__addNorm'>
<img src={svgAdd} alt='Añadir norma' />
AGREGAR NORMA
</span>
</button>
</div>
)}
/>
</FormGroup>回答 1
Stack Overflow用户
发布于 2020-07-24 00:23:12
Formik窗体中的每个字段都有一个name属性，此名称是属于正在使用的模糊窗体对象的属性路径。此表单对象可作为formProps上的values属性(由Formik组件的render方法提供)。
例如，名为"propertyA“的字段的值将在formProps.value.propertyA中可用，而名称为"propertyB.propertyC”的字段的值将在formProps.value.propertyB.propertyC中可用。
由于您正在使用的FieldArray将name属性设置为"dischargeNorms“，使用关联的arrayHelpers.insert插入的所有值都将插入到formProps.values.dischargeNorms可用的数组中。
与其从dummyNorms.normas映射字段组件，不如从formProps.values.dischargeNorms映射它们(其中插入了新的数组节点)。这些字段还应该使用名称dischargeNorms.${index}，以便它们引用您预期的属性路径。
const ExampleForm = () => {
return (
<Formik
initialValues={{
dischargeNorms: []
}}
render={formProps => {
return (
<Form>
<FieldArray
name='dischargeNorms'
render={(arrayHelpers) => (
<div>
<label>Norma de evaluación de descarga</label>
{
formProps.values.dischargeNorms.map((value, index) => (
<div key={index}>
<Field
name={`dischargeNorms.${index}`}
type='select'
component={DUIKSelect}
options={
dummyNorms.normas
}
/>
</div>
))
}
<button
className='modal__addBtn'
onClick={() => arrayHelpers.insert(index, '')}
type='button'
>
<span className='btn__addNorm'>
<img src={svgAdd} alt='Añadir norma' />
AGREGAR NORMA
</span>
</button>
</div>
)}
/>
</Form>
);
}}
/>
);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63062691
复制相关文章
相似问题
腾讯云开发者
