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

根据React中另一个字段的输入值,通过验证有条件地呈现Formik字段

,可以通过以下步骤实现:

  1. 首先,确保你已经安装了React和Formik库,并在项目中引入它们。
  2. 在React组件中,定义一个状态变量来存储另一个字段的输入值。可以使用useState钩子函数来创建并初始化这个状态变量。
  3. 在表单中,使用Formik组件包裹需要有条件显示的字段。将Formik组件的initialValues属性设置为表单的初始值,并在表单中使用Field组件来渲染字段。
  4. 在需要有条件显示的字段上,使用Formik组件的enableReinitialize属性来动态启用或禁用字段。将enableReinitialize属性设置为true,并在Field组件的disabled属性中使用条件表达式来控制字段的禁用状态。
  5. 在另一个字段的onChange事件处理函数中,更新状态变量的值。根据状态变量的值,动态更新Formik组件的enableReinitialize属性。

下面是一个示例代码:

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

const MyForm = () => {
  const [otherFieldValue, setOtherFieldValue] = useState('');

  const handleOtherFieldChange = (event) => {
    const value = event.target.value;
    setOtherFieldValue(value);
  };

  return (
    <Formik
      initialValues={{
        otherField: '',
        conditionalField: '',
      }}
    >
      {({ values }) => (
        <form>
          <label htmlFor="otherField">Other Field:</label>
          <input
            type="text"
            id="otherField"
            name="otherField"
            value={values.otherField}
            onChange={handleOtherFieldChange}
          />

          {values.otherField === 'someValue' && (
            <Field
              type="text"
              id="conditionalField"
              name="conditionalField"
              disabled={values.otherField !== 'someValue'}
            />
          )}

          <button type="submit">Submit</button>
        </form>
      )}
    </Formik>
  );
};

export default MyForm;

在上面的示例中,根据otherField的输入值,如果等于someValue,则有条件地显示conditionalField字段。当otherField的值改变时,会触发handleOtherFieldChange函数更新状态变量otherFieldValue的值。根据otherFieldValue的值,动态更新conditionalField字段的禁用状态。

这是一个简单的示例,你可以根据实际需求进行修改和扩展。同时,腾讯云提供了云计算相关的产品和服务,你可以参考腾讯云的文档和官方网站来了解更多详情。

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

相关·内容

React 中非受控和受控组件

React 中非受控和受控组件 两者都是呈现 HTML 表单元素 React 组件。这意味着,每当您创建具有 HTML 表单组件时,您都会创建两个组件任何一个。...受控组件 在 HTML ,表单元素(如、 和 )通常自己维护 state,并根据用户输入进行更新。...该组件将返回带有事件输入字段,该事件正在记录输入字段,并使用该方法将名称设置为新输入。 对于受控组件来说,输入始终由 React state 驱动。...「默认」 在 React 渲染生命周期中,DOM 将被表单元素上 value 属性覆盖。通过使用不受控制组件,您可能希望 React 设置初始,但保持后续更新不变。... 不受控制组件限制 无即时字段验证 无法有条件禁用提交按钮 无法强制执行输入格式 单个数据没有多个输入 无动态输入 小结 总体而言,非受控组件可以在必要时使用或比受控组件更有效

2.3K20

2023 React 生态系统,以及我一些吐槽……

我们将详细介绍 React Router 三个主要功能: 订阅和操作历史记录堆栈 将 URL 与你路由匹配 根据路由匹配呈现嵌套 UI 想深入了解的话,请看这里:React Router 基本概念...字段,并在组件挂载和卸载时管理缓存数据生命周期 RTK Query 提供了“缓存条目生命周期”选项,可以通过 WebSocket 消息流式传输缓存更新,以在获取初始数据后使用 我们有从 OpenAPI...Formik 是一个小型库,可以帮助您解决以下三个最令人讨厌问题: 将放入和取出表单状态 验证和错误消息 处理表单提交 通过将所有这些放在一个地方,Formik 可以让事情井然有序,使得测试、重构和理解您表单变得轻而易举...由于大约有 30 个独特表单,很快就明显发现,我们可以通过标准化不仅是输入组件,还有数据在表单流动方式来获益。 为什么不使用 Redux-Form?...格式化流水线、解析流水线、内置验证根据状态向元素添加和移除类名...这一切都很棒! 直到你需要做一些不符合 AngularJS 设计思路事情。

67430

回望过去,展望未来- 2024 React 生态一览表

同时,这个组件在原有功能基础上,还会被其他页面(B)调用,通过传人showLabels字段来显示正面和反面的字样,并且还有通过传人showButton来控制是否显示Button并用于触发硬币翻转。...它描述了发生了什么事情,通常以一个包含type字段纯对象形式存在。在状态管理,动作用于触发状态变更。...所以,再次给大家提供额外选择。 解决方案 1. Formik Formik[8] 提供一组工具和组件,使管理表单状态、验证和提交变得容易。使用 Formik 唯一缺点是它没有维护。 2....React Hook Form 以其性能和灵活性而闻名,是处理 React 应用程序中表单绝佳选择。 6. 测试 前端测试是指通过自动化测试工具和方法来验证前端应用正确性、性能和用户体验。...这类测试通常涉及到模拟用户在浏览器交互,如点击、输入等。 「覆盖率测试(Code Coverage):」 代码覆盖率测试用于衡量测试用例对源代码覆盖程度。

63710

使用 useState 需要注意 5 个问题

然而,没有人直接告诉你是,根据组件在该状态下期望,使用错误类型初始化 useState 可能会导致应用程序中意外行为,例如无法呈现 UI,导致黑屏错误。...使用可选链接操作符(?.),你可以读取深埋在相关对象链属性,而不需要验证每个引用对象是否有效。可选链接操作符(?.)就像点链接操作符(.)...管理表单多个输入字段 管理表单几个受控输入通常是通过为每个输入字段手动创建多个 useState() 函数并将每个函数绑定到相应输入字段来完成。...这可以通过以下方法实现:首先为每个输入字段指定一个惟一名称,然后创建一个 useState() 函数,该函数使用与输入字段名称相同属性进行初始化: import { useState, useEffect...获得此属性名后,我们修改它以反映表单用户输入。 6. 小结 作为一个创建高度交互用户界面的 React 开发人员,你可能犯过上面提到一些错误。

4.9K20

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

三元运算符是“if-else”语句单行替代品。它检查条件,如果为真则返回一个,如果为假则返回另一个。它简洁,非常适合 JSX 简单条件渲染。...首先,我们在自己文件定义 HOC withPremiumFeature(例如 withPremiumFeature.js): 现在,我们将创建一个组件,我们希望根据用户高级状态有条件呈现该组件。...它用于在组件之间共享渲染逻辑,允许您根据状态、道具或渲染prop包含逻辑有条件渲染 UI 不同部分。...让我们考虑一个场景,我们想要创建一个可重用组件来跟踪用户是否在线,然后根据该状态有条件呈现内容。 首先,我们创建 UserOnlineStatus 组件。...它非常适合需要根据状态、道具或渲染道具函数包含复杂逻辑有条件渲染 UI 不同部分场景。 通过遵循这些最佳实践,您将在 React 应用程序实现条件渲染时做出明智决策。

10410

关于React18更新几个新功能,你需要了解下

例如,考虑在过滤数据列表输入字段中键入。您需要将字段存储在 state ,以便您可以过滤数据并控制该输入字段。...您代码可能如下所示: // 更新输入和搜索结果 setSearchQuery ( input ) ; 在这里,每当用户键入一个字符时,我们都会更新输入并使用新来搜索列表并显示结果。...第一个更新是紧急更新,用于更改输入字段,以及可能会更改其周围一些 UI。 第二个是显示搜索结果不太紧急更新。...传递给函数startTransition同步运行,但其中任何更新都标记为“转换”。 React 将在稍后处理更新时使用此信息来决定如何呈现更新。这意味着我们比在超时中包装更新更早开始呈现更新。...通过转换,React 可以为您跟踪挂起状态,根据转换的当前状态更新它,并让您能够在用户等待时显示加载反馈。 我可以在哪里使用它? 您可以使用startTransition来包装要移动到后台任何更新。

5.4K30

关于React18更新几个新功能,你需要了解下

例如,考虑在过滤数据列表输入字段中键入。您需要将字段存储在 state ,以便您可以过滤数据并控制该输入字段。...您代码可能如下所示: // 更新输入和搜索结果 setSearchQuery ( input ) ; 在这里,每当用户键入一个字符时,我们都会更新输入并使用新来搜索列表并显示结果。...第一个更新是紧急更新,用于更改输入字段,以及可能会更改其周围一些 UI。 第二个是显示搜索结果不太紧急更新。...传递给函数startTransition同步运行,但其中任何更新都标记为“转换”。 React 将在稍后处理更新时使用此信息来决定如何呈现更新。这意味着我们比在超时中包装更新更早开始呈现更新。...通过转换,React 可以为您跟踪挂起状态,根据转换的当前状态更新它,并让您能够在用户等待时显示加载反馈。 我可以在哪里使用它? 您可以使用startTransition来包装要移动到后台任何更新。

5.9K50

优化 React APP 10 种方法

同样,它可以用于根据其属性缓存功能组件。 2.虚拟化长列表 如果呈现大型数据列表,建议一次在浏览器可见视口内仅呈现一小部分数据集,然后在列表滚动时呈现下一个数据,这称为“窗口” 。...在文本框输入2并Click Me连续单击按钮,我们将看到ReactComponent将被重新渲染一次,并且永远不会被渲染。 它将上一个道具和状态对象字段与下一个道具和状态对象字段进行浅层比较。...参见,在ReactCompo。cheapableFunc在JSX呈现,对于每次重新呈现,都会调用该函数,并将返回呈现在DOM上。...它在状态对象具有数据。如果我们在输入文本框输入一个并按下Click Me按钮,则将呈现输入。...如果再次单击该按钮,我们将有另一个重新渲染,不是这样,因为前一个状态对象和下一个状态对象将具有相同data,但是由于setState新状态对象创建,React将看到差异状态对象引用和触发器重新呈现

33.9K20

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

在后一种情况发生之前,React调用另一个生命周期方法componentWillUnmount。 任何已挂载元件状态可能会改变。 该元素父代可能会重新呈现。...有没有人提到有些人把只做展现组件叫做哑巴? 状态类字段是任何React类组件特殊字段React监视每个组件状态以进行更改。...但是对于React要有效执行这些操作,我们必须通过另一个需要学习React API函数来更改state字段,this.setState: // Example 13 - the setState...我们返回一个包含我们要更新对象。 注意在两次调用setState,我们只是从state字段传递一个属性,而不是两者。...组件可能需要在其状态更新时重新呈现,或者当其父级决定更改传递给组件props时,该组件可能需要重新呈现 如果后者发生,React会调用另一个生命周期方法componentWillReceiveProps

3.1K20

40道ReactJS 面试问题及答案

React 中有两种处理表单主要方法,它们在基本层面上有所不同:数据管理方式。 非受控组件:在非受控组件,表单数据由 DOM 本身处理,React通过状态控制输入。...受控组件:表单数据由 React 组件(而不是 DOM)处理,方法是将输入存储在状态,并在输入更改时更新状态。 输入React 状态控制,输入更改通过事件处理程序进行处理,从而更新状态。...输入验证:清理和验证用户输入,以防止跨站点脚本 (XSS) 和 SQL 注入攻击等常见安全漏洞。使用验证器等库进行输入验证,并在用户输入呈现在 UI 或在服务器上处理它们之前对其进行清理。...您可以通过使用高阶组件 (HOC)、渲染道具或上下文提供程序来实现受保护路由,以检查用户身份验证状态或权限,并有条件渲染适当组件或在需要身份验证时将用户重定向到登录页面。...这可以通过使 React 更好响应用户输入来提高性能。 它帮助 React 根据不同任务重要性和紧急程度确定更新和渲染优先级,确保高优先级更新得到更快处理。

25910

通过三个实例掌握如何使用 TypeScript 泛型创建可重用 React 组件

尽管在实际项目中我们通常会使用像 Formikreact-hook-form 这样库来处理表单,但为了演示泛型强大之处,我们将从头开始创建一个简单表单组件。...))} Submit ) } 使用通用表单组件 最后,我们使用通用表单组件,并指定具体表单字段和初始...使用泛型后,你可以创建一个通用表单组件,可以用于任何类型表单字段。这展示了泛型在 React 组件强大作用,使得我们组件更加灵活和可复用。...通过这种方式,我们可以确保数据类型一致性,并能够轻松渲染不同类型数据。 创建通用表格组件 首先,我们定义一个通用表格组件 Table,它接受一组行数据和一个用于渲染行函数。...通过使用泛型,你可以创建适用于任何数据类型组件,这在处理各种数据类型实际应用尤为有用。 希望这篇文章能让你更好地理解如何在 React 组件中使用泛型,并让你组件变得更加灵活和可重用。

16710

2022 年 React 生态

CSS 属性样式对象作为 HTML 样式属性键/对,从内联样式和基本 CSS 开始就可以。...所有的方案在大型 React 应用中都适用。最后一点提示:如果你想在 React有条件应用一个 className,可以使用像 clsx 这样工具。...它提供了从验证(一般会集成 yup 和 zod)到提交到表单状态管理所需一切。之前流行另一种方式是 Formik。两者都是不错解决方案。...通过使用 PropTypes,你可以为你 React 组件定义 props。...然而,由于身份验证有很多安全风险,而且并不是所有人都了解其中细节,我建议使用现有的众多身份验证解决方案一种: Firebase:https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial

5.8K20

高级前端常考react面试题指南_2023-05-19

所以即便在回调函数里,你拿到还是初始 props 和 state。如果想得到“最新”,可以使用 ref。React refs 干嘛用?...约束性组件( controlled component)就是由 React控制组件,也就是说,表单元素数据存储在组件内部状态,表单到底呈现什么由组件决定。...表单如何呈现由表单元素自身决定。如下所示,表单并没有存储在组件状态,而是存储在表单元素,当要修改表单数据时,直接输入表单即可。有时也可以获取元素,再手动修改它。...当要获取表单数据时,要首先获取表单元素,然后通过表单元素获取元素。注意:为了方便在组件获取表单元素,通常为元素设置ref属性,在组件内部通过refs属性获取对应DOM元素。...主要原因是,约東性组件支持即时字段验证,允许有条件禁用/启用按钮,强制输入格式等。

1.7K31

React入门学习笔记

React学习笔记 安装 1、通过js文件引入Reactjs文件 2、npm部署React环境 详情请参考官方文档 组件 Props数据传递 数据可以通过Props在两个组件间传递(父组件流向子组件...可以使用变量来存储元素,有条件渲染组件一部分内容。...受控组件 在HTML表单元素,表单元素会自己维护自己状态而在React可变状态通常是有state属性控制,并且只可以使用setState()更新属性;为了适应Reactstate成为“唯一数据源...”,渲染表单组件还控制着输入过程中表单发生操作,被React以这种方式控制取制表单输入元素称之为“受控组件”。...React文档也指出React对表单受控组件处理比较烦杂,而且存在非受控组件;官方给出了推荐[Formik]

2.5K20

前端精神小伙:React Hooks 响应式布局

前言 现在稍微大型站点都会采用H5/PC端 并行,通过nignx获取浏览器UA信息来切换站点。 但这对于一些企业站点或人手不足小型项目来说,就很难实现。...但是,有时在 React 程序,需要根据屏幕大小有条件渲染不同组件(写媒体查询太麻烦了,还不如另写组件),其实使用React Hooks,可以更灵活实现。 ?... : ; } 这个简单解决方案肯定会起作用。根据用户设备窗口宽度,我们可以呈现桌面视图或手机视图。...但是,当调整窗口大小时,未解决宽度更新问题,可能会渲染错误组件。 ? 2. 方案二:Hooks+resize 说着也简单,监听resize事件时,触发useEffect改变数据。...但是这里还有另一个性能问题: 响应式布局影响是多个组件,如果在多处使用useViewport,这将浪费性能。 ? 这时就需要另一个React亲儿子:React Context(上下文) 来帮忙。

2.5K30

三分钟让你了解什么是Web开发?

服务器端脚本可以读取浏览器通过POST发送,然后处理它或将其存储到文件或数据库。简单说,这就是数据如何被推送到服务器,然后最终存储在一个文件或数据库。...通过认证用户创建新博客 为此,我们需要一个带有两个输入字段(标题、内容)HTML表单,用户可以通过该表单创建一个博客帖子。...在用户输入信息并单击submit按钮后,“创建Post”,这些表单通过Post发送到web服务器。可以使用任何服务器端脚本语言读取POST。...该脚本还可以进行处理,可以从获取服务器日期和时间,也可以是基于从另一个表或web服务检索来计算字段另一个注意事项:脚本也可以执行验证,也称为服务器端验证,以确保数据是有效。...我们需要根据所请求blog post ID读取数据库数据,然后显示标题和内容字段内容。 显示单个博客文章高级伪代码: 从数据库读取数据以获取博客文章ID。

5.8K30
领券