Formik

封装可多选的组件(Autocomplete)

代码展示importReactfrom'react'import{useField,useFormikContext}from'formik'
Why_so_serious_Y·2023-12-02 14:38

antd中Select下拉框全选、全不选的处理方法

这里我用的是formik.js管理表单状态的，不是本文重点。
清颖~·2023-11-10 08:42

React 使用技巧：useReducer、immer库和 Formik工具库

1.使用useReducerhookuseReducer是useState的替代品，它可以更好的管理组件的状态。useReudcer的格式：import{useReducer}from"react";let[state,dispatch]=useReducer(reducer,initialArg,init);各个变量的含义：state拿到状态数据；dispatch派发action的函数；redu
多云转晴ing·2023-10-24 03:32

ReactNative 密码生成器实战

效果展示图使用插件Formik负责表单校验、监听表单提交、数据校验错误信息展示Yup负责表单校验规则分析页面从上述的展示图我们可以看到的主要元素有：输入框、单选按钮和按钮。
林中白虎·2023-08-24 16:25

简单介绍 React Native 整合 Formik 实现表单校验

Formik是React和ReactNative开源表单库，Formik负责处理重复且烦人的事情——跟踪值/错误/访问的字段、编排验证和处理提交——所以您不必这样做。
林中白虎·2023-08-23 22:53

React使用formik+yup创建表单

React使用formik+yup创建表单简述在React中，react提供了ref来让我们获取react元素对应的真实的dom元素，利用这个特性我们确实可以获取表单域所对应的值importReact,
Joey_Tribiani·2023-08-09 14:23

react中的formik如何使用

介绍：Formik是一个用于处理表单状态和验证的React库。它提供了一种简化和统一的方式来处理复杂的表单逻辑，包括表单值的管理、表单验证、表单提交和错误处理等。
姚*鸿的博客·2023-08-09 14:23

formik-antd

formik-antd由于我们的项目使用了antd组件库，所以希望在使用formik来实现表单的时候页面展示仍然可以是antd组件的样子，还好formik有一个很好的和antd结合的库formik-antd
前端小白的摸爬滚打·2023-06-21 03:14

React项目实战之租房app项目（九）登录模块基础布局和功能实现

前言目录前言一、房屋详情模块二、登录模块2.1登录模块效果图2.2基础布局2.3调用接口实现登录2.4实现表单验证功能2.4.1formik介绍2.4.2formik基本使用2.4.3添加表单验证2.5
小陈工·2023-04-14 02:27

Formik 表单处理组件（React学习笔记）

Formik学习记录安装Formik组件基本用法表单验证基础验证验证优化使用Yup验证表单验证规则配置减少样板代码使用组件的方式构建表单构建其他表单项构建自定义表单项表单控件自定义复选框控件Formik
假装文艺浪·2022-03-24 12:12

formik-yup书写React表单验证

使用formik和yup是为了解决react-form表单验证的繁琐不使用插件，form表单验证利用onChange事件触发写的表单规则再分别对不同type书写规则验证逻辑为表单定义state//关键代码逻辑
·2022-03-15 13:32

Fomir: 又一个表单轮子

我尝试了很多表单库，比如redux-form、formik、final-form、react-hook-form、formilyjs...它们都非常优秀，但和我的理想型总是差一点。我
·2022-03-09 11:55

formik中文文档

1、本文对Formik文档进行了归纳整理，https://formik.org/docs，并结合源码，总结了学习心得，供大家参考2、本文Formik版本：v2.x一、简介：1、什么是Formik：是由React
叫我王必过·2022-02-15 19:42

Formik使用教程以及开发中遇到的问题

Formik笔记一、Formik的概念与理解（一）官方案例初步写法：（二）官方案例进阶写法：二、官方链接一、Formik的概念与理解Formik是一个小型库。
清颖~·2021-10-03 12:53

Formik 学习笔记

Formik学习笔记文章出处：拉勾大前端高薪训练营1.Formik1.1Formik介绍增强表单处理能力，简化表单处理流程官网1.2Formik下载npminstallformik2.Formik增强表单
爱玲姐姐·2021-01-06 08:26

使用Formik+Yup实现表单提交以及验证

validationSchemachangedependingonformvaluesyup.lazy((values)=>{constisCPF=values.docType==='cpf'returnyup.object().shape({docType:yup.string(),number:isCPF?yup.string().cpf():yup.string().cnpj()})})}o
Cris·2020-12-12 14:10

使用Formik+Yup实现表单提交以及验证

validationSchemachangedependingonformvaluesyup.lazy((values)=>{constisCPF=values.docType==='cpf'returnyup.object().shape({docType:yup.string(),number:isCPF?yup.string().cpf():yup.string().cnpj()})})}o
Cris·2020-12-12 14:10

使用 Formik +Yup 处理 React 表单验证

前言React操作表单一直都是比较繁琐的操作，在以前用的是redux-form，但现在formik这个库设计得更加优雅，Github的star数目已经远远超过redux-form了。
JackySummer·2020-11-23 22:05

react好租客项目Day09-房屋详情&路由配置&登录功能&formik表单校验

房屋详情模块-准备工作目标看懂模板HouseDetail的结构能够获取到数据，渲染到组件上能够配置通用路由规则，并且获取路由参数模板说明创建房屋详情页面HouseDetail修改NavHeader组件（添加了className和rightContent两个props）创建了HousePackage组件（房屋配套）这些模板已经提供好，可以直接来使用//添加className和rightContent
码德浮乐·2020-08-22 14:04

让你的React表单操作更优雅（formik+yup）

表单操作在React中一直是一件比较繁琐的事情，使用formik可以极大的简化表单操作，formik的slogan就是BuildformsinReact,withoutthetears?
weixin_34381687·2020-08-18 17:53

Yup错误: TypeError: Cannot read property 'object'

问题在调试Formik+react-select工程时出现上述Yup错误！
weixin_34247299·2020-08-18 17:11

React-formik、yup基本使用方法（建议收藏）

formik概述使用formik配合yup可以快速帮助我们实现表单校验并提示错误信息//安装npminstallformik--save//在页面中引入import{Form,Field,withFormik
Dt_man·2020-08-01 10:58

Formik官方应用案例解析（二）表单校验

简介官方示例工程formik-09x-synchronous-validation-example展示的是基于Formik的表单开发中如何进行定制的同步校验的问题。
weixin_33794672·2020-08-01 09:25

让你的React表单操作更优雅（formik+yup）

表单操作在React中一直是一件比较繁琐的事情，使用formik可以极大的简化表单操作，formik的slogan就是BuildformsinReact,withoutthetearsformikformik
AHOhhhh·2019-02-13 17:22

react表单的使用- formik

表单在mall项目中我们不在使用ant提供的form去创建表单，取而代之的是使用formik以及yup配合使用来做表单的验证。
张义飞·2018-12-13 14:02

Formik与antd-mobile的移动端的表单实践（下）

大家好，工作闲暇之余又来续写一下Formik这个库的文章了，这次文章主要内容为如下：更多表单组件的封装示例单选/多选按钮选择器时间选择器文本输入框提交按钮Formik的表单验证Formik的表单提交处理总结表单组件的封装在上篇我们简单的封装了一下
thewindsword·2018-09-26 00:00

Formik与antd-mobile的移动端的表单实践（上）

概览本文主要用于记录该次使用Formik时用到的相关接口，而侧重点不在antd-mobile，对antd-mobile会贴出对应组件API。
thewindsword·2018-08-28 00:00

Formik官方应用案例解析（ 五）React Native

HelloReactNative在创建一个入门的HelloReactNative工程时遇到一些麻烦，主要原因是Xcode版本太低。使用create-react-native-app快速创建ReactNative框架开发React相关项目，我使用的是Webstorm2017.2版本。通过网络引见，我相当然地使用了create-react-native-app这个模板库在Webstorm中创建初始Re
googlingman·2018-08-06 08:31

Formik官方应用案例解析（四）组件生命周期事件

基础示例工程：formik-09x-component-lifecycle-events-example核心文件：index.js示例说明Formik大部分示例工程中都使用了极其方式创建Formik表单组件
googlingman·2018-08-04 09:01

Formik官方应用案例解析（三）使用react-select

react-select简介React-Select是github上一个极其火的控件库，星数达到13004，它是React开发中几乎是你必需打交道的一个内容。ReactSelect的基本功能实现的是一个表单中的常见的下拉列表框控件，其实它的功能扩展来看远远不止如此，它支持：多选样式定制多级联动选择异步加载等等。但是，如果在你的开发中使用的是一个很基础性的下拉列表框，那么你可以直接使用类似于Sema
googlingman·2018-08-02 09:26

Yup错误: TypeError: Cannot read property 'object'

问题在调试Formik+react-select工程时出现上述Yup错误！
googlingman·2018-08-01 17:54

Formik官方应用案例解析（二）表单校验

简介官方示例工程formik-09x-synchronous-validation-example展示的是基于Formik的表单开发中如何进行定制的同步校验的问题。
googlingman·2018-07-31 22:58

Formik官方应用案例解析（一）Basics

一、说明下载地址：https://codesandbox.io/s/zKrK5YLDZ案例Basics主要介绍Formik的基本用法，我想在前面几篇的基础上着重分析一下其核心API及数据结构的使用思路。
googlingman·2018-07-31 13:39

使用Formik轻松开发更高质量的React表单（四）其他几个API解析

旧话重提前文中我特别提起ReduxForm以及redux-form的问题，我觉得学习Formik你不得不提它们，当然还有它们的「老祖宗」React；既然选择了，那么你必须按照这个方向走下去。
googlingman·2018-07-30 10:57

使用Formik轻松开发更高质量的React表单（三）<Formik />解析

提醒和建议根据我的粗浅经验，如果您对Formik感兴趣，并且想深入学习与使用这个库，我建议您还是先对redux-form的使用逻辑与有关概念有所了解，而且理解和使用方面也变得容易得多的多。
googlingman·2018-07-30 06:30

使用Formik轻松开发更高质量的React表单（二）使用指南

一个基本的例子设想你要开发一个可以编辑用户数据的表单。不过，你的用户API端使用了具有类似下面的嵌套对象表达：{id:string,email:string,social:{facebook:string,twitter:string,//...}}最后，我们想使开发的对话框表单能够接收下面几个属性（props）：user，updateUser和onClose（显然，user是一个对象，updat
googlingman·2018-07-29 11:41

使用Formik轻松开发更高质量的React表单（一）入门

前言发现Formik是在我学习redux-form过程中从国外一篇博客上偶然发现的，看到作者的高度肯定后我立即转到github上，正如许多朋友所关注的，Formik的星数达8282，这个数字在github
googlingman·2018-07-29 10:31
上一页 1 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他