zoukankan      html  css  js  c++  java
  • [React] Validate React Forms with Formik and Yup

    Validating forms in React can take several lines of code to build. However, Formik's ErrorMessage component and Yup simplify that process.

    import { ErrorMessage, Field, Form, Formik } from 'formik';
    import React from 'react';
    import { render } from 'react-dom';
    import './index.css';
    import ItemList from './ItemList';
    import * as Yup from 'yup';
    
    const initialValues = {
      item: '',
    };
    
    const validationSchema = Yup.object().shape({
      item: Yup.string().required('Item name is required'),
    });
    
    const App = () => {
      const [items, setItems] = React.useState([]);
    
      return (
        <React.Fragment>
          <h2>Regular Maintenance:</h2>
          <ItemList items={items} />
          <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={values => {
              setItems([...items, values.item]);
            }}
          >
            <Form>
              <label htmlFor="item">Item:</label>
              <Field type="text" name="item" />
              <ErrorMessage name="item" />
              <button type="submit">Add Item</button>
            </Form>
          </Formik>
        </React.Fragment>
      );
    };
    
    export default App;
    
    render(<App />, document.getElementById('root'));
  • 相关阅读:
    webstorm一键格式化为Eslint标准
    Promise 对象
    ES6类的继承
    RabbitMQ之pika模块
    常见操作
    增量式爬虫
    分布式爬虫(scrapy-redis)
    crawlspider
    scrapy框架学习
    斐波那契数列
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10644305.html
Copyright © 2011-2022 走看看