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

  • 相关阅读:
    2020-12
    知识的深度跟知识的广度
    限额类费用报销单N+1原则
    用友实习总结
    NC57,NC63-NC二开经验总结
    union和union all的区别
    2020
    mark_rabbitMQ
    营销之路
    怎么对ORACLE里的CLOB字段进行模糊查询
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9935965.html
Copyright © 2011-2022 走看看