Question

当在表单内单击按钮时，我需要找到一种添加Formik的<Field />（键入 select ）的方法。我试图了解example given in the docs，但我不明白。

我的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>

Answer 1

Formik表单中的每个字段都有一个name属性，该名称是属于使用中的模糊表单对象的属性路径。该表单对象可用作formProps上的values属性（由Formik组件的render方法提供）。

例如，名称为“ propertyA”的字段将在formProps.value.propertyA上提供其值，而名称为“ propertyB [0] .propertyC”的字段将在formProps.value上提供其值。 .propertyB [0] .propertyC。

当您使用的FieldArray的name属性设置为“ dischargeNorms”时，使用关联的arrayHelpers.insert插入的所有值都将插入到formProps.values.dischargeNorms可用的数组中。

您应该从formProps.values.dischargeNorms（要插入新数组节点的地方）映射它们，而不是从dummyNorms.normas映射字段分量。这些字段还应该使用名称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>
                );
            }}
        />
    );
};

使用React＆Formik在Form内单击按钮时如何添加<Field />？

1 个答案: