首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

尝试在FieldArray react JS中根据条件呈现字段

FieldArray 是 ReactJS 表单库 Formik 中的一个组件,用于处理动态字段数组。它允许我们根据条件动态地呈现字段。

在 FieldArray 中,我们可以使用 map 函数来遍历字段数组,并根据条件渲染相应的字段。以下是一个示例代码:

代码语言:txt
复制
import { Formik, Field, FieldArray } from 'formik';

const MyForm = () => {
  return (
    <Formik
      initialValues={{ fields: [] }}
      onSubmit={(values) => {
        // 处理表单提交逻辑
      }}
    >
      {({ values }) => (
        <form>
          <FieldArray name="fields">
            {({ push, remove }) => (
              <div>
                {values.fields.map((field, index) => (
                  <div key={index}>
                    <Field name={`fields[${index}]`} />
                    {field === 'condition' && (
                      <Field name={`fields[${index}].additionalField`} />
                    )}
                    <button type="button" onClick={() => remove(index)}>
                      删除字段
                    </button>
                  </div>
                ))}
                <button type="button" onClick={() => push('')}>
                  添加字段
                </button>
              </div>
            )}
          </FieldArray>
          <button type="submit">提交</button>
        </form>
      )}
    </Formik>
  );
};

export default MyForm;

在上面的示例中,我们使用 FieldArray 组件来处理名为 "fields" 的字段数组。通过 map 函数遍历数组中的每个字段,并根据条件渲染相应的字段。在这个例子中,如果字段的值为 "condition",则会呈现一个额外的字段。

这是一个简单的示例,你可以根据自己的需求进行扩展和修改。如果你想了解更多关于 FieldArray 的用法和参数,可以参考 Formik 官方文档中的相关部分:FieldArray - Formik

希望这个答案能够帮助到你!如果你对其他问题有任何疑问,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券