[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'));