首页
学习
活动
专区
工具
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

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

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

相关·内容

Antd Form 实现机制解析

背景 “后台业务,表单页面基础的场景包括组件值的收集、校验和更新。... to B 业务,表单页面的需求往往更复杂和定制化,除了上述的基本操作,还要处理包括自定义表单组件、表单联动、表单的异步检验等复杂场景,一些大型表单页面还要考虑性能的问题,表单页面的需求往往是新同学摔得第一个跤...createFieldsStore.js 暴露的 createFieldsStore 函数用来创建 FieldsStore 类的实例。... onCollect 和 validateFieldsInternal 方法,我们看到最后一步调用了 setFields 来更新实时数据。...当然这并不是很优雅的解决方案,未来要发布的 Antd V4 版本,Form 的底层实现已经替换为 rc-field-form(https://github.com/react-component/field-form

2.7K20

Typo3 CVE-2019-12747 反序列化漏洞分析

Typo3,TCA算是对于数据库表的定义的扩展,定义了哪些表可以Typo3的后端可以被编辑,主要的功能有 表示表与表之间的关系 定义后端显示的字段和布局 验证字段的方式 这次漏洞的两个利用点分别出在了...77.jpg 这样一来,在这个请求过程,进行反序列化的字符串我们就可以控制了。 表单中提交任意符合数组格式的输入,在后端代码中都会被解析,然后后端根据TCA来进行判断并处理。...$currentRecord是个数组 TCA$table的表属性存在transOrigDiffSourceField、languageField、transOrigPointerField字段。...从注释,我们可以知道传入的各个参数的功能: 数组 $fieldArray 是默认值,这种一般都是我们无法控制的 数组 $incomingFieldArray 是你想要设置的字段值,如果可以,它会合并到...$fieldArray

2.4K10
  • Typo3 CVE-2019-12747 反序列化漏洞分析

    Typo3,TCA算是对于数据库表的定义的扩展,定义了哪些表可以Typo3的后端可以被编辑,主要的功能有 表示表与表之间的关系 定义后端显示的字段和布局 验证字段的方式 这次漏洞的两个利用点分别出在了...$currentRecord是个数组 TCA$table的表属性存在transOrigDiffSourceField、languageField、transOrigPointerField字段。...从注释,我们可以知道传入的各个参数的功能: 数组 $fieldArray 是默认值,这种一般都是我们无法控制的 数组 $incomingFieldArray 是你想要设置的字段值,如果可以,它会合并到...$fieldArray。...尝试在网站中新建一个page,然后调用fillInFieldArray的位置下一个断点,发送请求后,我们就拿到了调用链。 ? 看一下mainAction的代码。

    2.6K30

    Kafka第一天笔记

    一个topic的消息可以分布topic的不同partition replica:副本,实现Kafkaf集群的容错,实现partition的容错。...如果ack响应的过程失败了,此时生产者会重试,继续发送没有发送成功的消息,Kafka又会保存一条一模一样的消息 Kafka可以开启幂等性 当Kafka的生产者生产消息时,会增加一个pid(生产者的唯一编号...,会连着pid和sequence number一块发送 kafka接收到消息,会将消息和pid、sequence number一并保存下来 如果ack响应失败,生产者重试,再次发送消息时,Kafka会根据...pid、sequence number是否需要再保存一条消息 判断条件:生产者发送过来的sequence number 是否小于等于 partition消息对应的sequence 事务编程 如果使用了事务...msg = fieldArray[0] + "," + fieldArray[1] + "," + fieldArray[2]; // (4) 生产消息到dwd_user

    60330

    优化 React APP 的 10 种方法

    同样,它可以用于根据其属性缓存功能组件。 2.虚拟化长列表 如果呈现大型数据列表,建议一次浏览器的可见视口内仅呈现一小部分数据集,然后列表滚动时呈现下一个数据,这称为“窗口” 。...文本框输入2并Click Me连续单击按钮,我们将看到ReactComponent将被重新渲染一次,并且永远不会被渲染。 它将上一个道具和状态对象的字段与下一个道具和状态对象的字段进行浅层比较。...参见,ReactCompo。cheapableFuncJSX呈现,对于每次重新呈现,都会调用该函数,并将返回值呈现在DOM上。...如果字段已更改,它将告诉React重新渲染;如果没有字段已更改,则尽管创建了新的状态对象,它也会取消重新渲染。 6. 使用 Web worker JS代码单个线程上运行。...它在状态对象具有数据。如果我们输入文本框输入一个值并按下Click Me按钮,则将呈现输入的值。

    33.9K20

    一篇包含了react所有基本点的文章

    ReactDOM将忽略该函数并呈现常规的空HTML按钮。 每个组件都接收一个属性列表,就像HTML元素一样。 React,这个列表叫做props。...这既不是JavaScript也不是HTML,甚至不是React.js。 但是,它非常受欢迎,成为React应用程序的默认设置。 它被称为JSX,它是一个JavaScript扩展。 JSX也是妥协!...继续尝试在上面的函数的任何其他HTML元素,并查看它们是如何支持的(例如,返回一个文本输入元素)。 2: What the flux is JSX?...这不是只有React才可以使用的。 3: 您可以JSX的任何位置使用JavaScript表达式 JSX部分,您可以一对花括号内使用任何JavaScript表达式。...7: React组件有一个私有状态 以下也仅适用于类组件。 有没有人提到有些人把只做展现的组件叫做哑巴? 状态类字段是任何React类组件的特殊字段React监视每个组件状态以进行更改。

    3.1K20

    深入了解 useMemo 和 useCallback

    每次“re-render”都会根据当前状态脑海中生成 DOM 应该是什么样子的图像。但实际上它是一堆JS对象,被称为“「virtual DOM」”。... JavaScript ,我们只有一个主线程,我们通过一遍又一遍地运行这段代码让它非常繁忙,每一秒。这意味着当用户尝试做其他事情时,应用程序可能会感到迟缓,特别是低端设备上。...依赖项列表 挂载期间,当这个组件第一次呈现时,React 将调用这个函数来运行所有的逻辑,计算所有的质数。...本质上,我们告诉 React 这个组件将总是相同的输入条件下产生相同的输出,我们可以跳过没有任何改变的重新呈现。...我们将 boxWidth 列为一个依赖项,因为我们确实希望在用户调整红色框的宽度时重新呈现 Boxes 组件。然而, useMemo ,我们重用了之前创建的 boxes 数组。

    8.9K30

    加速Webpack-缩小文件搜索范围

    遇到导入语句时 Webpack 会做两件事情: 根据导入语句去寻找对应的要导入的文件。例如 require('react') 导入语句对应的文件是 ..../node_modules/react/react.js,require('./util') 对应的文件是 ./util.js根据找到的要导入文件的后缀,使用配置的 Loader 去处理文件。...2-4 Resolve 中介绍过 resolve.extensions 用于配置尝试过程中用到的后缀列表,默认是: extensions: ['.js', '.json'] 也就是说当遇到 require...配置 resolve.extensions 时你需要遵守以下几点,以做到尽可能的优化构建性能: 后缀尝试列表要尽可能的小,不要把项目中不可能存在的情况写到后缀尝试列表。...---- 以上就是所有和缩小文件搜索范围相关的构建性能优化了,根据自己项目的需要去按照以上方法改造后,你的构建速度一定会有所提升。 本实例提供项目完整代码

    1.1K10

    webpack性能优化总结大全

    为了减少搜索步骤,明确第三方模块的入口文件描述字段时,我们可以将它设置得尽量少。...中指定的入口文件 react.js 为模块的入口 一套是将 React 的所有相关代码打包好的完整代码放到一个单独的文件, 这些代码没有采用模块化,可以直接执行。...其中 dist/react.js 用于开发环境,里面包含检查和警告的代码。dist/react.min.js 用于线上环境,被最小化了。 默认情况下, Webpack 会从入口文件 ..../node_modules/react/react.js 开始递归解析和处理依赖的几十个文件,这会是一个很耗时的操作 通过配置 resolve.alias, 可以让 Webpack 处理 React...后缀尝试列表要尽可能小,不要将项目中不可能存在的情况写到后缀尝试列表。 频率出现最高的文件后缀要优先放在最前面,以做到尽快退出寻找过程。

    1.7K20

    React】1981- React 的 8 种条件渲染的方法

    条件渲染是React的一个强大功能,它允许开发人员根据某些条件控制组件的显示。它在创建动态和交互式用户界面方面发挥着至关重要的作用。...那么,让我们深入研究并释放 React 条件渲染的全部潜力! 了解 React 条件渲染 条件渲染是根据一定的条件选择性地渲染组件的过程。这使得开发人员能够创建更加动态和响应更快的用户界面。... React ,有几种方法可以 React 应用程序处理条件渲染。 If/Else 语句 三元运算符 (?) 逻辑与 (&&) 空合并运算符 (??)...首先,我们自己的文件定义 HOC withPremiumFeature(例如 withPremiumFeature.js): 现在,我们将创建一个组件,我们希望根据用户的高级状态有条件呈现该组件。...现在,父组件,我们可以使用 UserOnlineStatus 并向其传递一个函数,以根据用户的在线状态呈现我们想要的内容。

    12110

    开发一个在线 Web 代码编辑器,如何?今天来教你!

    否则,如果该值既不是 html 也不是 css,那么这意味着该值必须是 js。 我们对三元运算符条件的不同部分使用了 p 标签 。后面我们将创建编辑器组件并用编辑器组件本身替换 p 标签。...setEditorState 属性代表我们 App.js 声明的每个状态的值,保存每个编辑器的值。...创建 iframe 容器来容纳编辑器的结果 让我们继续, App.js 创建一个 iframe 来容纳我们的编辑器的结果。...使用 iframe 时,我们可以页面上嵌入外部网页或呈现指定的 HTML 内容。要加载和嵌入外部页面,我们将使用 src 属性。...让我们 App.js 文件编写 useEffect() 来执行此操作: 首先,导入 useEffect() 钩子: import React, { useState, useEffect } from

    12.1K30

    【实战】快来和我一起开发一个在线 Web 代码编辑器

    否则,如果该值既不是 html 也不是 css,那么这意味着该值必须是 js。 我们对三元运算符条件的不同部分使用了 p 标签 。 后面我们将创建编辑器组件并用编辑器组件本身替换 p 标签。...setEditorState 属性代表我们 App.js 声明的每个状态的值,保存每个编辑器的值。...创建 iframe 容器来容纳编辑器的结果 让我们继续, App.js 创建一个 iframe 来容纳我们的编辑器的结果。...使用 iframe 时,我们可以页面上嵌入外部网页或呈现指定的 HTML 内容。 要加载和嵌入外部页面,我们将使用 src 属性。...让我们 App.js 文件编写 useEffect() 来执行此操作: 首先,导入 useEffect() 钩子: import React, { useState, useEffect } from

    75620

    离开页面前,如何防止表单数据丢失?

    我们将讨论如何使用纯 JavaScript 处理此类情况,使用 React Router v5 的 Prompt 组件以及 React Router v6 中使用 useBeforeUnload 和... Next {">"} ); }); 当在表单字段输入数据并在保存更改之前尝试重新加载页面或导航到外部...它作为布局组件,每个页面上呈现。每个页面的内容显示特殊的 Outlet 组件的位置。为了简化 App 逻辑,我们还将主页导航链接移动到 Stepper 。...最后,我们 usePrompt 钩子抽象出阻止逻辑并管理阻止器的状态。 我们可以通过导航到联系步骤,填写一些字段并单击主页导航项来测试 FormPrompt 是否按预期工作。...我们探讨了如何使用纯JavaScript处理这种情况,使用 beforeunload 事件以及React中使用React Router v5的 Prompt 组件和React Router v6

    5.8K20

    ReactJS和React-Native的主要区别在哪里

    这些React-Native组件映射了应用程序上呈现的实际的真正的原生iOS或Android UI组件。... ); } } 由于您的代码不会在HTML页面呈现,这也意味着您将无法重用以前使用的ReactJS使用任何类型的HTML,SVG或Canvas的库...我确信你为现代浏览器写代码时遇到过类似的问题,而且需要在旧浏览器中看起来“不太糟糕”,在这里添加一些条件代码,在那里Javascript甚至Javascript 。...我建议您将组件的主要逻辑定义一个名为index.js的文件,然后您将使用单个文件定义演示组件。.../index.js 如果你觉得拥有两个不同的文件是非常小的变化太多的开销,你可以使用具有条件语句的Platform模块。

    17K30

    第八十六:前端即将或已经进入微件化时代

    useInsertionEffect 允许JS的CSS解决渲染中注入样式的性能问题。 同时react-dom分成了React DOM Client 和 React DOM Server。...(悬念*我个人理解为尚未加载到界面的内容)如果组件完全添加到树之前挂起,React将不会在不完整状态下将其添加到树,也不会激发其效果。...相反,React将完全丢弃新树,等待异步操作完成,然后重新尝试渲染。React将同时呈现重试尝试,而不会阻塞浏览器。 悬念布局效果。...当树重新挂起并恢复为回退时,React现在将清除布局效果,然后边界内的内容再次显示时重新创建它们。这解决了一个问题,即当与未加载的组件一起使用时,组件库无法正确测量布局。 新的JS环境要求。...React现在在卸载时清理更多的内部字段,使应用程序代码可能存在的未修复内存泄漏的影响不那么严重。 和微件化的关系 说了这么多,都是在说react更新的内容。

    3K10

    React Native是怎么渲染出原生组件的

    开始研究这个问题之前,我们缕一下我们的困惑: ReactReact Native 和 native 的关系 React Native 开始渲染逻辑的入口 React Native 是怎么更新 UI...的变化的 React Native 是怎么创建 native 的 View 并且设置布局、位置和属性的 入口 整个JS 端的逻辑都从默认的 index.js 开始执行,代码也只有一行: 这里会调用...这里调用 UIManager 的 createView 创建 View,最后根据 tag、viewConfig 等字段得到 component 对象。...这个 UIManager Android 端对应的是 com.facebook.react.bridge.UIManager 。...简单总结就是 js 把 virtual dom的结构发给了 native 端, native 利用 Yoga 的能力比较高效的计算出 View 的实际位置。然后把 View 最终呈现在屏幕上。

    2.4K30

    「前端架构」Grab的前端学习指南

    传统上,浏览器从服务器接收HTML并呈现它。当用户导航到另一个URL时,需要刷新整个页面,服务器为新页面发送新的HTML。这称为服务器端呈现。 但是现代的SPAs,使用的是客户端呈现。...React,只需更改组件的状态,视图就会根据状态更新自身。通过查看render()方法的标记也很容易确定组件的外观。 功能-视图是一个纯粹的道具和状态的功能。...React在内存中保持DOM的轻量级虚拟表示。重新呈现一切是一个误导的术语。React,它实际上是指重新呈现DOM在内存的表示,而不是实际的DOM本身。...在学习了Redux之后,您可以尝试将其合并到您已经构建的React项目中。Redux是否解决了您在pure React遇到的一些状态管理问题?...目前还没有社区同意用JS编写CSS的方法,我们希望有一天能像Redux一样Flux实现脱颖而出。现在,我们指望CSS模块。

    7.4K20

    React 18快速指南和核心概念解释

    18 从npm或yarn安装React 18和React DOM npm install react react-dom 使用createRoot代替render index.js,ReactDOM.render...React 18之前,渲染是一个单一的、不间断的、同步的事务,一旦渲染开始,就不能被中断。 并发性是React呈现机制的基本更新。并发性允许React中断呈现。...React,当调用setState时,批处理有助于减少状态改变时重新呈现的数量。...服务器呈现服务器上呈现React组件的HTML输出并从服务器发送HTML的一种技术。这可以让用户JS包加载时以及应用程序交互之前查看一些UI。...所有这些都发生在页面加载JSReact之前,从而显著改善了用户体验和用户感知的延迟。 Strict模式 React 18的 Strict模式将模拟安装、卸载和重新安装组件的状态。

    30610

    渐进式React

    可以说 React 为Web开发者带来了全新的开发模式,而在各类新功能下,如何达到性能最优仍是我们需要关心的。今天做一次精读尝试,原文地址文末,话不多说,先呈上一份性能清单: 1....使用 React DevTools Profiler 分析性能 React 16.5 开始使用 Profiler API 收集组件渲染耗时,以独立Tab形式呈现React DevTools 。...React DevTools Profiler 示例 相比 Chrome DevTools Performance 呈现的 Timing 信息,React DevTools Profiler 提供了更多辅助定位性能瓶颈的组件级信息...这里主要是安利 Workbox 这个工具包,它能让我们更简单地使用 Service Worker,具体细节不做展开, PWA 的浪潮,你的站点值得拥有。...上面提到的 SSR 更是如此,因为客户端JS加载之前,SSR 返回的无样式 DOM 已经开始渲染了。

    2.1K70
    领券