[React] Simplify and Convert a Traditional React Form to Formik

时间:2021-09-06 18:51:47

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&period;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&period;5起已弃用,请使用prop-types

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

  9. React入门介绍(2)- React Component-React组件

    React Component-React组件 允许用户*封装组件是React非常突出的特性,用户可将自己创建的组件像普通的HTML标签一样插入页面,React.CreateClass方法就是用来创 ...

随机推荐

  1. 初次体验VS2015正式版,安装详细过程。

    本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 阅读目录 介绍 安装 其他 本文版权归mephi ...

  2. 前端编码规范(4)—— CSS 和 Sass &lpar;SCSS&rpar; 规范

    CSS and Sass (SCSS) style rules ID and class naming ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称.代替表象和晦涩难懂 ...

  3. HDU 4454 - Stealing a Cake(三分)

    我比较快速的想到了三分,但是我是从0到2*pi区间进行三分,并且漏了一种点到边距离的情况,一直WA了好几次 后来画了下图才发现,0到2*pi区间内是有两个极值的,每个半圆存在一个极值 以下是代码 #i ...

  4. Biorhythms(poj1006&plus;中国剩余定理)

    Biorhythms Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 117973   Accepted: 37026 Des ...

  5. sosreport-汇总收集linux系统信息

    有时候我们想将Linux服务器信息一次性查询并导出发送给他人,我们可以使用这个sosreport这个工具 安装  yum install sos -y 收集信息 sosreport 收集到的信息默认保 ...

  6. 一个是EF内联多表查询,一个是EF中写SQL文。

    public IList<MenuModel> GetAllMenu() { using (IMMEntities context = new IMMEntities()) { var m ...

  7. Salesforce数据安全简介

    数据安全级别 Salesforce中将数据安全分为若干等级: 组织级别:组织级别的安全设定在整个系统内部都有效.这是最广泛的级别 对象级别:对象级别的安全设定可以限制用户对于对象的权限 字段级别:字段 ...

  8. Tf中的NCE-loss实现学习【转载】

    转自:http://www.jianshu.com/p/fab82fa53e16 1.tf中的nce_loss的API def nce_loss(weights, biases, inputs, la ...

  9. c&plus;&plus;学习笔记(六)- vector使用和内存分配

    -----------------------------2019/01/15------------------------------- 复习了下迭代器,其实c++参考里讲的很清楚,主要需要辨析规 ...

  10. Jenkins之手动安装

    Download and run Jenkins Download Jenkins. Open up a terminal in the download directory. Run java -j ...