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

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!

<iframe height="240" src="https://codesandbox.io/embed/5zqpz2r59k?fontsize=14" style="width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;" width="320"></iframe>

标签：Formik,Traditional,prevState,verbose,items,React,Item
来源： https://www.cnblogs.com/Answer1215/p/10479070.html