如何添加一個<field />當使用 React 和 Formik 在表單中單擊按鈕時？

Question

當在表單內單擊按鈕時，我需要找到一種方法來添加 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>

Answer 1

Formik 表單中的每個字段都有一個名稱屬性，該名稱是一個屬性路徑，屬於正在使用的混淆表單 object。 此表單 object 可用作 formProps 上的 values 屬性（由 Formik 組件的 render 方法提供）。

例如，名稱為“propertyA”的字段將在 formProps.value.propertyA 中獲得其值，而名稱為“propertyB[0].propertyC”的字段將在 formProps.value.propertyB[ 中獲得其值0].propertyC.

由於您使用的 FieldArray 的 name 屬性設置為“dischargeNorms”，因此使用關聯的 arrayHelpers.insert 插入的所有值都將插入到 formProps.values.dischargeNorms 可用的數組中。

而不是從 dummyNorms.normas 映射您的字段組件，您應該從 formProps.values.dischargeNorms （插入新數組節點的位置） map 它們。 這些字段還應使用名稱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>
                );
            }}
        />
    );
};