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. hdu 4547 LCA **

    题意:在Windows下我们可以通过cmd运行DOS的部分功能,其中CD是一条很有意思的命令,通过CD操作,我们可以改变当前目录. 这里我们简化一下问题,假设只有一个根目录,CD操作也只有两种方式: ...

  2. DataTable初次使用笔记

    概述:DataTable是一个jQuery插件,用于生成HTML表格,功能很强大. 使用: 使用DataTable需要引入jQuery,因为他是基于jQuery的插件,然后引入DataTable的js ...

  3. Elasticsearch中document的基础知识

    写在前面的话:读书破万卷,编码如有神-------------------------------------------------------------------- 参考内容: <Ela ...

  4. Codeforces Round #357 (Div. 2) D. Gifts by the List 水题

    D. Gifts by the List 题目连接: http://www.codeforces.com/contest/681/problem/D Description Sasha lives i ...

  5. paypal对接

    paypal支付接口准备工作 首先去申请一个paypal账号,https://www.paypal.com/. 申请完毕并登录,进入https://developer.paypal.com/devel ...

  6. 选择问题(selection problem)

    /*     本文是选择问题: 选择一组N个数当中的第k小的数(第k大的数类似)     集中方法的实现代码 */       #include "sorting.h" #incl ...

  7. 华为S5300系列升级固件S5300SI-V100R003C00SPC301.cc

    这个固件是升级V100R005的中间件,所以是必经的,注意,这个固件带有http的服务,但现在无论官网还是外面,几乎找不到这个固件的web功能,如果非要实现,可以拿V100R005的web文件改名为w ...

  8. PostgreSQL控制台以竖行显示

    \x select * from user; 这个和MySQL的有点区别,在查询之前使用\x进行显示的开启 注意:只需要用一次即可,以后的查询都是以竖行进行显示.

  9. 订阅Linux内核邮件列表

    http://www.wowotech.net/sort/linux_application/lkml.html https://kernelnewbies.org/ML https://lkml.o ...

  10. EF三种加载方法

    EF性能之关联加载   鱼和熊掌不能兼得 ——中国谚语 一.介绍 Entity Framework作为一个优秀的ORM框架,它使得操作数据库就像操作内存中的数据一样,但是这种抽象是有性能代价的,故鱼和 ...