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. 选择排序之Java实现

    选择排序之Java实现 一.方法一 package cn.com.zfc.lesson21.sort; /** * * @title SelectSort * @describe 选择排序 * @au ...

  2. Luogu 4492 [HAOI2018]苹果树 组合数

    https://www.luogu.org/problemnew/show/P4492 找每个编号的点的父边的贡献,组合数和阶乘就能算了. 我考场上怎么就是没想到呢. 调了好久好久好久好久调不出来,样 ...

  3. zookeeper【1】配置管理

    为什么要用统一配置? 我们做项目时用到的配置比如数据库配置等...我们都是写死在项目里面,如果需要更改,那么也是的修改配置文件然后再投产上去,那么问题来了,如果做集群的呢,有100台机器,这时候做修改 ...

  4. Mysql的学习随笔day1

    关于mysql的基本语句 ps:[]是缺省 创建:CREATE DATABASE  db.name CREATE TABLE name(列名,类型,[NULL])NOT NULL是不需要为空,NOT ...

  5. Python 学习笔记一

    前言 这篇博客是在学习某个网站时记录下来的,所以其纪录的顺序和那个网站里面一样,有些知识点已经大概了解了就不再赘述. 基础 字符串和编码 在计算机内存中,统一使用Unicode编码,当需要保存到硬盘或 ...

  6. Educational Codeforces Round 13 D. Iterated Linear Function 水题

    D. Iterated Linear Function 题目连接: http://www.codeforces.com/contest/678/problem/D Description Consid ...

  7. 恢复二进制文件中的block符号表

    前篇博客中,使用 杨君的小黑屋 提供的工具恢复二进制文件的符号表,只恢复了函数的符号表,本篇讲述如何恢复block符号表,杨君的博客中使用IDA分析二进制文件,本篇则使用MacOS系统上体验也不错的H ...

  8. h5的部分新元素或属性

    #h5的新元素或属性 - datalist标签(新表单元素):规定了input元素可能的选项列表.   * 条件:datalist的id属性值必须等于input元素的list属性值.          ...

  9. Vue集成腾讯地图和几何库

    关于Vue中如何引入腾讯地图,百度搜索中的结果已经非常明确: /** * 腾讯地图. * @param key * @returns {Promise<any>} * @construct ...

  10. linux下TP5安装好Workerman 报错:Class 'think\worker\Server' not found

    今天把功能放到服务器,本地测试正常,上传到服务器上报错Class 'think\worker\Server' not found 首先想到的是Windows和Linux下大小写的问题,查看了代码,并没 ...