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. [WC2018]州区划分(状压DP+FWT/FMT)

    很裸的子集反演模板题,套上一些莫名其妙的外衣. 先预处理每个集合是否合法,再作显然的状压DP.然后发现可以写成子集反演的形式,直接套模板即可. 子集反演可以看这里. 子集反演的过程就是多设一维代表集合 ...

  2. 【字符串哈希】The 16th UESTC Programming Contest Preliminary F - Zero One Problem

    题意:给你一个零一矩阵,q次询问,每次给你两个长宽相同的子矩阵,问你它们是恰好有一位不同,还是完全相同,还是有多于一位不同. 对每行分别哈希,先一行一行地尝试匹配,如果恰好发现有一行无法对应,再对那一 ...

  3. bzoj 3252: 攻略

    3252: 攻略 Description 题目简述:树版[k取方格数]   众所周知,桂木桂马是攻略之神,开启攻略之神模式后,他可以同时攻略k部游戏. 今天他得到了一款新游戏<XX半岛>, ...

  4. GIT(6)----fork和clone的区别,fetch与pull的区别

    参考资料: [1].Git学习笔记:fork和clone的区别,fetch与pull的区别 [2].在Github和Git上fork之简单指南

  5. OpenVPN原理及实践文章收集(转)

    一.基本理论篇 vpn原理及实现--一般理论 vpn原理及实现--隧道的一种实现 vpn原理及实现--虚拟网卡构建vpn vpn原理及实现--tcp还是udp Linux平台VPN技术概论 Linux ...

  6. MyBatis入门实例-包括实体类与数据库字段对应&CLOB字段处理

    1.我的开发环境是 jdk1.7+ecplise+oracle 11g 用到的jar包:mybatis-3.1.1.jar ojdbc6.jar 2.项目整体结构     3.首先配置conf.xml ...

  7. oracle 存储过程循环体中的return和exit区别:

    oracle 存储过程循环体中的return和exit区别:   (1) return 跳出整个循环,终止该循环, 后面的不再执行.     相当于 Java 中的break;   (2)  exit ...

  8. Effective JavaScript Item 35 使用闭包来保存私有数据

    本系列作为EffectiveJavaScript的读书笔记. JavaScript的对象系统从其语法上而言并不鼓舞使用信息隐藏(Information Hiding).由于当使用诸如this.name ...

  9. jquery获取单选button选中的值

    在页面上单选button的代码: <s:iterator value="@com.hljw.cmeav.util.CmeavGlobal@isComMap"> < ...

  10. 如何利用javascript获取表单中select下拉列表中所选中项的值value

    1.html代码如下: <html> <head> </head> <body> <form name="form1" id= ...