开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么OnChange在Formik中使用时不能工作？

Formik是一个用于构建表单的React库，它提供了一些方便的功能和组件来处理表单的状态管理、验证和提交等操作。在Formik中，OnChange是一个事件处理函数，用于处理表单元素的值发生变化时的操作。

然而，有时候在使用Formik时，OnChange可能会出现不能工作的情况。这可能是由于以下几个原因：

表单元素没有正确绑定到Formik的状态：在Formik中，表单元素的值应该通过value属性与Formik的状态进行绑定。如果没有正确绑定，Formik将无法捕获到表单元素值的变化，从而导致OnChange事件无法触发。确保表单元素的value属性与Formik的状态正确绑定。
表单元素没有正确设置name属性：在Formik中，表单元素的name属性用于标识表单元素，以便Formik可以正确地更新相应的状态。如果没有正确设置name属性，Formik将无法识别表单元素，并且OnChange事件将无法正常工作。确保表单元素的name属性正确设置。
表单元素没有正确包裹在Formik组件中：在使用Formik时，表单元素应该被正确地包裹在Formik组件中，以便Formik可以管理表单的状态。如果表单元素没有正确包裹在Formik组件中，Formik将无法捕获到表单元素值的变化，从而导致OnChange事件无法触发。确保表单元素被正确地包裹在Formik组件中。

总结起来，当使用Formik时，如果OnChange事件不能工作，需要检查以下几个方面：表单元素是否正确绑定到Formik的状态、表单元素是否正确设置name属性、表单元素是否正确包裹在Formik组件中。确保这些方面都正确设置后，OnChange事件应该能够正常工作。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：提供可扩展的计算能力，满足各种业务需求。详情请参考：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务，适用于各种场景。详情请参考：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：提供全面的物联网解决方案，帮助用户快速构建物联网应用。详情请参考：https://cloud.tencent.com/product/iot
腾讯云区块链（BCB）：提供安全、高效的区块链服务，支持多种场景的应用开发。详情请参考：https://cloud.tencent.com/product/bcb
腾讯云视频处理（VOD）：提供强大的视频处理能力，包括转码、截图、水印等功能。详情请参考：https://cloud.tencent.com/product/vod

相关搜索:Formik:为什么在onSubmit中使用setTimeOut？R函数独立工作，在lapply中使用时出错为什么@UniqueConstraint在hibernate中不能工作？为什么BasicTextField (在compose中)不能正常工作？为什么Colspan在使用jquery后不能工作？为什么jQuery .height()在火狐中不能工作？为什么sudo在macOS终端不能工作？为什么在AlertDialog中FocusManager不能工作？为什么在python中使用xlrd打开工作簿时，变量可以工作，而列表不能工作？为什么在使用时区时，来自momentjs的isSame方法不能正常工作？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

React 组件优化

使用时需要先下载： npm install formik --save Formik 库可以与 yup 库一块使用，库的作者也推荐搭配使用，yup 是一个用于验证字段的库，它的用法类似于 React 中的...用法下面写个例子，一个表单，我们需要表单做验证，验证不通过就提示用户为什么不对。...），在使用时，也应设置如 type、name 等属性。... 组件比较复杂，在构建 Formik 表单程序时，Formik 和下面它的几个属性是需要设置的： initialValues 接收一个对象，表示初始化的表单控件的值，对象的键应是表单的.../> 组件可以让你不用再手动创建 onSubmit 或 onResize 事件句柄，在 Formik 组件中直接书写即可。

7.2K2 0

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

表单处理 Formik 面对现实吧，在 React 中处理表单确实很冗长。更糟糕的是，大多数表单辅助工具做了太多的魔法，并且通常会伴随着显著的性能损耗。...我（@jaredpalmer）在与 @eonwhite 一起构建一个大型内部管理仪表板时编写了 Formik。...由于大约有 30 个独特的表单，很快就明显发现，我们可以通过标准化不仅是输入组件，还有数据在表单中的流动方式来获益。 为什么不使用 Redux-Form？...到现在为止，您可能会想，“为什么你不只是使用 Redux-Form？”问得好。...此外，Formik 依赖于表单元素，并且在控制 Redux 存储时存在一些挑战。

5683 0

前端元编程——使用注解加速你的前端开发

借助这两个对象，你可以在 JavaScript 元级别进行编程。 MDN 在正式开始之前，我们先复习下Decorator和Reflect。...Form表单我们使用Formik + Tea Form Component + yup(数据校验)。...Formik 使用React Context来提供表单控件所需的各种方法数据，然后借助提供的Field等组件，你可以很方便的封装你的业务表单组件。...import React, { FC } from 'react' import { Field, Form, Formik, FormikProps } from 'formik'; import {...中使用 export const PersonForm:FC<{ onClose: () => void }> = props => { const initialValues = Person.getFormInitValues

3.1K2 0

前端元编程——使用注解加速你的前端开发

借助这两个对象，你可以在 JavaScript 元级别进行编程。在正式开始之前，我们先复习下 Decorator和 Reflect。...Form表单我们使用Formik + Tea Form Component + yup(数据校验)。...Formik 使用React Context来提供表单控件所需的各种方法数据，然后借助提供的Field等组件，你可以很方便的封装你的业务表单组件。...import React, { FC } from 'react'import { Field, Form, Formik, FormikProps } from 'formik';import { Form...中使用 export const PersonForm:FC void}> = props

3.4K2 0

精读《React — 5 Things That Might Surprise You》

可以使用useRef来存储静态变量我们习惯于使用 React 中的 ref 机制作为访问元素的 DOM 节点的手段，无论是因为我们需要它来计算其大小、设置焦点状态，或者基本上做任何 React 自然不能做的事情...但是 refs 也可以用于不同的目的——我们可以使用类组件非常容易·实现这一点，但我们不能使用函数式组件——保留一个不会在每次渲染时重新创建的静态变量。...点击demo ❝在函数式组件中我们可以使用ref存储静态变量 ❞ 3. React 可以强制重新挂载一个组件写入DOM的成本非常高。这就是为什么我们通常不想重新mount 组件，除非绝对必要。...onLifecycleChange]); return Child Comp; }); 4.Context不像你期望的那样工作...) React.Children.forEach(children, fn) React.Children.count(children) ❝如果你需要在您的组件中强制执行单个子项（我最近注意到 formik

1.1K2 0

ColyseusJS 轻量级多人游戏服务器开发框架 - 中文手册（下）

客户端 Callbacks 您可以在客户端 schema 结构中使用以下回调来处理来自服务器端的更改。...}; onChange (changes: DataChange[]) onChange 对于直接 Schema 引用和集合结构的工作方式不同。...onChange (instance, key) onChange 对于直接 Schema 引用和 collection structures 的工作方式不同。...我们目前缺少一个与 Colyseus 兼容的 ECS 包，一些工作已经开始尝试将ECSY 与 @colyseus/schema 结合起来。 为什么?...实现扩展来添加一个新的命令很容易，可以在不改变现有代码的情况下完成。严格控制命令的调用方式和调用时间。由于命令简化了代码，因此代码更易于使用、理解和测试。

2.5K2 0

深度解读 Observation —— SwiftUI 性能提升的新途径

欢迎大家在 Discord 频道[2] 中进行更多地交流 为什么要创建 Observation 框架在 Swift 5.9 版本之前，苹果没有为开发者提供一种统一高效的机制来观察引用类型属性对变化。...如何在视图中使用可观察对象在视图中声明可观察对象与遵守 ObservableObject 协议的 Source of Truth 不同，我们会在视图中使用 @State 来确保可观察对象的声明周期。...onChange 闭包的调用时机是什么？所谓的 “when the value of a property changes” 是在属性被更改前还是更改后？...get 方法被调用时（调用由 apply 闭包引发）, 会通过 access 方法在可观察对象实例的 ObservationRegistrar 中保存 apply 闭包中出现的可观察属性与回调闭包之间的对应关系...onChange 函数后，本次观察都将结束 onChange 闭包是在属性值变化之前（willSet 方法中）被调用的在一次观察操作中，可以观察多个可观察属性。

4982 0

2020 年你应该知道的 React 库

以下是一些流行的解决方案: nivo Victory react-vis Recharts Chart Parts React 中的表单库在 React 中最流行的表单库是 Formik。...虽然 Prettier 不能取代 ESLint，但是它与 ESLint 的集成非常好。...最终，您会发现自己在使用 Enzyme 或 React Testing Library (这两个都在 Jest 测试环境中使用)来进行更详细的测试功能集。...为什么？因为您总是必须呈现组件中的列表。由于 JSX 是 HTML 和 JavaScript 的混合物，所以您可以使用 JavaScript 在数组上进行映射并返回 JSX。...，我只能想到以下内容，因为我没有在 React 中使用任何其他内容: Draft.js Slate React 中的支付和其他网络应用一样，最常见的支付提供商是 Stripe 和 PayPal。

14.4K4 0

常见react面试题（持续更新中）

此函数必须保持纯净，即必须每次调用时都返回相同的结果。...什么是受控组件和非受控组件受状态控制的组件，必须要有onChange方法，否则不能使用受控组件可以赋予默认值（官方推荐使用受控组件）实现双向数据绑定class Input extends Component...React Hooks 的限制主要有两条：不要在循环、条件或嵌套函数中调用 Hook；在 React 的函数组件中调用 Hook。那为什么会有这样的限制呢？...那为什么不要在循环、条件或嵌套函数中调用 Hook 呢？因为 Hooks 的设计是基于数组实现。在调用时按顺序加入数组中，如果使用循环、条件或嵌套函数很有可能导致数组取值错位，执行错误的 Hook。...要在整个组件中使用 Refs，需要将 ref 在构造函数中分配给其实例属性：class MyComponent extends React.Component { constructor(props)

2.6K2 0

React 16.8.6 升级指南（react-hooks篇）

---- 为什么需要Hooks 更好地在组件之间复用状态逻辑 “高内聚，低耦合”是非常具有前瞻性的软件开发原则，React中的组件似乎也践行得很不错可以说近乎完美，但是从另一个角度上看，组件内部逻辑的和视图的耦合度却是出奇的高...复杂组件变得难以理解通常我们实现一个列表功能的应用时，并不能像想象中的“智能组件”和“木偶组件”那样拆分，随着功能的逐渐增多，列表中的每一项需要承载的功能也就愈多，负责展示的木偶组件也不得不改写为智能组件...，还不能忘记绑定事件。...组件折叠: https://github.com/facebook/react/issues/7323 class 不能很好的压缩。 class 在热重载时会出现不稳定的情况。...如此就实现了count和fetchData调用时机的绑定关系。

2.6K3 0

Note·React Hook

Hook 不能在 class 组件中使用。什么时候使用 Hook？...如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class，而现在你可以在现有的函数组件中使用 Hook。...在 class 中，可以通过在构造函数中设置 this.state 来初始化 state，但是在函数组件中，我们没有 this，所以不能分配或读取 this.state，我们直接在组件中调用 useState...={handleChange} /> ) } useState 是 react 提供的新方法，这是一种在函数调用时保存变量的方式，它与 class 里面的 this.state...只有 Hook 的调用顺序在每次渲染中都是相同的，React 才能正确地将内部 state 和对应的 Hook 进行关联，它才能够正常工作。

2.1K2 0

Typescript 中，这些类型工具真好用

processContent 函数中使用它了： import { getContent } from '@example' const content = await getContent() type...React 中使用工具类型工具类型也可以在 React 组件方面给我们很大的帮助。...这将导致我们的输入不能像预期的那样工作，因为 React 不会意识到状态的变化，因此不会呈现变化。我们需要做的是用一个新对象调用 setEvent。...那你可能突然会问：为什么 TypeScript 没有捕捉到这个错误呢? 从技术上讲，你可以用 useState 改变对象。...Extract 从联合类型中删除不能分配给 Type 的所有成员： type Extracted = Extract void)

1843 0

120. 精读《React Hooks 最佳实践》

FAQ 为什么不用 React.memo?...为什么不用解构方式代替 defaultProps?...其实在 Input 组件 onChange 使用 debounce 有一个问题，就是当 Input 组件受控时， debounce 的值不能及时回填，导致甚至无法输入的问题。...虽然看上去只是将更新 id 的时机交给了子元素，但由于 onChange 函数在每次渲染时都会重新生成，因此引用总是在变化，就会出现一个无限死循环：新 onChange...想要阻止这个循环的发生，只要改为 onChange={this.handleChange} 即可，useEffect 对外部依赖苛刻的要求，只有在整体项目都注意保持正确的引用时才能优雅生效。

1.1K1 0

关于Java异常Exception最常见的十大问题1 受检异常 VS 非受检异常2 异常管理的最佳实践3 为什么在try语句中定义的变量不能在catch和finally语句中使用？4 为什么Doubl

非受检异常是由哪些在程序编译时不能被解决的问题所引起的，常见的有除以0，空指针等等。受检异常非常重要，因为你希望其他使用你的程序API的开发者知道如何去处理这些异常。...Paste_Image.png 2 异常管理的最佳实践如果一个异常能够被正确的处理，那么他就该捕获，反之，则该被抛出 3 为什么在try语句中定义的变量不能在catch和finally语句中使用？...The code does not pass compilation 下面这段代码，string s定义在try语句块中，然后却在catch语句中使用了s，这段程序是无法通过编译的 try {...这就是为什么try语句中定义的变量不能在catch和finally语句中使用。...语句中使用么？

1.1K4 1

掌握 SwiftUI 的 task 修饰器

欢迎大家在 Discord 频道[2] 中进行更多地交流随着 Swift 5.5 引入了 async/await 特性，苹果也为 SwiftUI 添加了 task 视图修饰器，以方便开发者在视图中使用基于...用 “出现之前” 来描述 onAppear 或 task 闭包的调用时机属于无奈之举。在不同的上下文中，“出现之前”会有不同的解释。...main}为什么会出现这样的情况呢？...task 为什么没有默认运行在后台线程中？...在了解了两个版本的 task 修饰器的工作原理和调用机制后，为老版本的 SwiftUI 添加 task 修饰器将不再有任何困难。

2.2K3 0

如何在受控表单组件上使用 React Hooks

为什么我们还要声明 setFirstName 呢？因为这是一个函数组件，所以我们没有 setState 来帮助我们修改状态变量的值。...在第一个输入标记中，我们将其值设置为在组件顶部声明的状态变量。至于 onChange 处理程序，我们将它设置为一个箭头函数，为我们更新状态变量的函数。...我们在以前的类组件中有一个名为 handleInputChange 的方法，现在有一个匿名函数为我们更新状态。通过尝试在表单中输入文本来检查一切是否正常工作。...from-embed 反思更新: 一些人可能对在 onClick 处理程序中使用内联函数的想法感到震惊。...我给 Dan Abramov 发了一条推特，他回复了 Hooks 文档的这一部分，解释了为什么在 Hooks 中使用内联函数并不是一件坏事。

5892 0

【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS，作为一个开发过前端的人员来说，调试一个图片花了半天的时间，最后发现分隔符用错了，实在是一件很丢人的事情。...CSS3中使用了很多的属性选择器，通过这些属性选择器，可以根据我们自己的设计来定义元素的样式，制作精美的网页。 CSS3属性选择器下面是CSS3的属性选择器的语法，及使用。...元素名字[元素类型=“类型名字”]：选择器名字{ 属性：值；属性：值； } 　　在元素类型匹配时，就可以使用类似正则的匹配方法。...focus：编辑焦点时，触发 enabled：可以使用时，触发 disabled：不可以使用时，触发 read-only：只读时，触发 read-write：可读可写时，触发 checked：...="radio_onchange();">可用 49 <input type="radio" id="radio2" name="radio" onchange="radio_onchange

7137 0

掌握 SwiftUI 的 task 修饰器

随着 Swift 5.5 引入了 async/await 特性，苹果也为 SwiftUI 添加了 task 视图修饰器，以方便开发者在视图中使用基于 async/await 的异步代码。...用 “出现之前” 来描述 onAppear 或 task 闭包的调用时机属于无奈之举。在不同的上下文中，“出现之前”会有不同的解释。...= main} 为什么会出现这样的情况呢？...task 为什么没有默认运行在后台线程中？...在了解了两个版本的 task 修饰器的工作原理和调用机制后，为老版本的 SwiftUI 添加 task 修饰器将不再有任何困难。

3.5K6 0

从 ant design 中，学一手复杂组件交互的最佳实践

React 知命境第 44 篇，原创第 158 篇我们在学习的时候遇到的 Demo 经常都是比较简单的，但是一旦到了实践工作中，数据和功能就开始变得复杂了。...可以在组件内部给一个通用默认值，这样在大多数情况就不需要显示的传入了第二，Input 受控属性 value。...这是许多人在使用时可能会不太理解的地方。受控属性的目的是用于在父组件去控制 TreeSelect 的显示。...因此，在使用时，我们需要考虑的是，利用 defaultValue 或者 value 去回显组件在初始化时的数据。然后利用 onChange 获取得到最新的值即可。...在页面上我们使用一个列表来暂时选中结果列表。在该结果展示列表中，可以删除项。当需要重新选中时，需要点开一个弹窗，然后弹窗中有一个完整的人员分页列表。

1301 0

【React】1260- 聊聊我眼中的 React Hooks

调用时序在使用useState的时候，你有没有过这样的疑惑：useState虽然每次render()都会调用，但却可以为我保持住 State，如果我写了很多个，那它怎么知道我想要的是什么 State...好比封装一个纯函数add()，不论开发者是在什么环境调用、在多么深的层级调用、用什么样的调用时序，只要传入的参数符合要求，它就可以正常运作，简单而纯粹。...= () => {} render() { return ( ...即便我们的封装中不包含任何 Hooks，在调用时也仅仅是包一层useEffect而已，不算费事，而且让这段逻辑也可以在 Hooks 以外的地方使用。...如果自定义 Hooks 中使用到的useEffect和useState总次数不超过 2 次，真的应该想一想这个 Hook 的必要性了，是否可以不封装。

1.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭