时间戳

首页 > 解决方案 > 如何重置/清除有条件渲染的 Formik FieldArray？

reactjs - 如何重置/清除有条件渲染的 Formik FieldArray？

问题描述

使用 Formik，我通过一个选择列表值有条件地呈现，一个 FieldArray 有两个字段，即名称和年龄。

我的问题是，假设我已经渲染了这个与姓名和年龄相关的 FieldArray 并创建了 5 行信息，但是我决定将选择列表值更改为现在隐藏这个 FieldArray 的另一个值。这样做时，我怎样才能将此 FieldArray 清除/重置为 null？

标签： reactjsselectformik

解决方案

根据表单组件的结构，可以有多种方法来执行此操作。

这是使用setFieldValueFormik 导出的函数显式设置字段值的一种方法。

const FormComp = () => {
  return (
    <div>
      <Formik>
        {({ values, setFieldValue }) => (
          <Form>
            <select
              onChange={(e) => {
                const {value} = e.target;
                let shouldResetFieldArray = value !== 'showFieldArray'; // replace with actual condition
                if (shouldResetFieldArray) {
                  setFieldValue("fieldArrayKey", []); // reset fieldArrayKey to empty array [];
                }
              }}
            ></select>
          </Form>
        )}
      </Formik>
    </div>
  );
};

推荐阅读