zoukankan      html  css  js  c++  java
  • [React] Persist Form Data in React and Formik with formik-persist

    It can be incredibly frustrating to spend a few minutes filling out a form only to accidentally lose all of your progress by the browser closer, the page refreshing, or many other terrible scenarios. formik-persist saves you from that fate by providing a Persist component which you can drop inside of any Formik Form to save the state of the form into localStorage. This lesson walks you through creating the Form and using the Formik Persist component.

    import React, { Component } from "react"
    import "./App.css"
    import { Formik, Form, Field } from "formik"
    import { Persist } from "formik-persist"
    
    class App extends Component {
      state = {
        firstName: "",
        lastName: ""
      }
    
      render() {
        return (
          <>
            <Formik onSubmit={values => this.setState(values)}>
              {props => (
                <Form style={{ display: "flex", flexDirection: "column" }}>
                  <label htmlFor="firstName">First Name</label>
                  <Field id="firstName" name="firstName" />
                  <label htmlFor="lastName">Last Name</label>
                  <Field id="lastName" name="lastName" />
                  <button type="submit">Submit</button>
                  <Persist name="person-form" />
                </Form>
              )}
            </Formik>
            {JSON.stringify(this.state)}
          </>
        )
      }
    }
    
    export default App

  • 相关阅读:
    并查集模板
    css margin 负值 合并盒子边框线
    滑动门原理
    精灵图制作
    css 单行文本超出用 省略号表示...
    css vertical-align 垂直对齐 解决图片空白缝隙
    css 鼠标样式 取消input 框 轮廓线 防止用户拖拽文本域
    css 显示与隐藏
    css 圆角矩形用法
    css 定位详解
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9935965.html
Copyright © 2011-2022 走看看