Forms in React are not easy. T

render() {
return (
<React.Fragment>
<h2>Regular Maintenance:</h2>
<ItemList items={this.state.items} />
<Formik
onSubmit={values => {
this.setState(prevState => ({
items: [...prevState.items, values.item]
}));
}}
>
<Form>
<label htmlFor="name">Item:</label>
<Field type="text" name="item" />
<button type="submit">Add Item</button>
</Form>
</Formik>
</React.Fragment>
);
}

hey are verbose and several lines of code. However, forms with Formik are much simpler. Formik maintains the state of inputs and simplifies the form so you can work quicker!

[React] Simplify and Convert a Traditional React Form to Formik的更多相关文章

  1. 【共享单车】—— React后台管理系统开发手记:AntD Form基础组件

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  2. 如何使用TDD和React Testing Library构建健壮的React应用程序

    如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序. 每次我想测试它时 ...

  3. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  4. React系列(一):React入门

    React简介 1.由来 React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题. 2.React的优势 解决大规模项目开发中数据 ...

  5. React Native是一套使用 React 构建 Native app 的编程框架

    React Native是一套使用 React 构建 Native app 的编程框架 React Native at first sight what is React Native? 跟据官方的描 ...

  6. react.js 从零开始(七)React (虚拟)DOM

    React 元素 React 中最主要的类型就是 ReactElement.它有四个属性:type,props,key 和ref.它没有方法,并且原型上什么都没有. 可以通过 React.create ...

  7. React环境配置(第一个React项目)

    使用Webpack构建React项目 1. 使用NPM配置React环境 NPM及React安装自行百度 首先创建一个文件夹,the_first_React 进入到创建好的目录,npm init,然后 ...

  8. react的类型检查PropTypes自React v15.5起已弃用,请使用prop-types

    最近使用React的类型检查PropTypes时,遇到错误:TypeError: Cannot read property 'array' of undefined 看了下自己的React版本:    ...

  9. react 也就这么回事 01 —— React 元素的创建和渲染

    React 是一个用于构建用户界面的 JavaScript 库 它包括两个库:react.js 和 react-dom.js react.js:React 的核心库,提供了 React.js 的核心功 ...

随机推荐

  1. BZOJ 2726: [SDOI2012]任务安排 [斜率优化DP 二分 提前计算代价]

    2726: [SDOI2012]任务安排 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 868  Solved: 236[Submit][Status ...

  2. Curl 及 Curl的使用介绍

    Curl 简介 Curl是Linux下一个很强大的http命令行工具,其功能十分强大. 1) 二话不说,先从这里开始吧! $ curl http://www.linuxidc.com 回车之后,www ...

  3. 【洛谷】NOIP提高组模拟赛Day2【动态开节点/树状数组】【双头链表模拟】

    U41571 Agent2 题目背景 炎炎夏日还没有过去,Agent们没有一个想出去外面搞事情的.每当ENLIGHTENED总部组织活动时,人人都说有空,结果到了活动日,却一个接着一个咕咕咕了.只有不 ...

  4. bzoj hash+map+set

    先对原串分组hash,查询就是看某一区间内是否出现某值. 可以每个值存一个集合,保存这个值出现的位置.(也可以建可持久化值域线段树) map<int,set<int> >很省事 ...

  5. ACM需要掌握算法

    数据结构 栈,队列,链表 哈希表,哈希数组 堆,优先队列 双端队列 可并堆 左偏堆 二叉查找树 Treap 伸展树 并查集 集合计数问题 二分图的识别 平衡二叉树 二叉排序树 线段树 一维线段树 二维 ...

  6. JavaScript操作DOM(动态表格处理)

    <html> <title>动态处理表格数据</title> <head> <script type="text/javascript& ...

  7. A* search算法解迷宫

    这是一个使用A* search算法解迷宫的问题,细节请看:http://www.laurentluce.com/posts/solving-mazes-using-python-simple-recu ...

  8. Duplicate Elimination in Scrapy(转)

    之前介绍 Scrapy 的时候提过 Spider Trap ,实际上,就算是正常的网络拓扑,也是很复杂的相互链接,虽然我当时给的那个例子对于我感兴趣的内容是可以有一个线性顺序依次爬下来的,但是这样的情 ...

  9. Qt on Android: Android SDK安装

    之前我在 <Windows下Qt 5.2 for Android开发入门>一文中介绍了 Windows 下 Qt on Android 开发环境的搭建,略过了 Android SDK 的安 ...

  10. ajax访问遇到Session失效问题

    最近由于一个项目,模块切换为ajax请求数据,当Session失效后,ajax请 求后没有返回值,只有响应的html:<html><script type='text/javascr ...