withFormik() - rkaku/formik-material-ui GitHub Wiki
options
- displayName?: string
- enableReinitialize?: boolean
- handleSubmit: (values: Values, formikBag: FormikBag) => void
- isInitialValid?: boolean | (props: Props) => boolean
- mapPropsToErrors?: (props: Props) => FormikErrors
- mapPropsToStatus?: (props: Props) => any
- mapPropsToTouched?: (props: Props) => FormikTocuhed
- mapPropsToValues?: (props: Props) => Values
- validate?: (values: Values, props: Props) => FormikErrors | Promise
- validateOnBlur?: boolean
- validateOnChange?: boolean
- validateOnMount?: boolean
- validationSchema?: Schema | ((props: Props) => Schema)
import React from 'react';
import { withFormik } from 'formik';
const MyForm = props => {
const {
values,
touched,
errors,
handleChange,
handleBlur,
handleSubmit,
} = props;
return (
<form onSubmit={handleSubmit}>
<input
type="text"
onChange={handleChange}
onBlur={handleBlur}
value={values.name}
name="name"
/>
{errors.name && touched.name && <div id="feedback">{errors.name}</div>}
<button type="submit">Submit</button>
</form>
);
};
const MyEnhancedForm = withFormik({
mapPropsToValues: () => ({ name: '' }),
// Custom sync validation
validate: values => {
const errors = {};
if (!values.name) {
errors.name = 'Required';
}
return errors;
},
handleSubmit: (values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 1000);
},
displayName: 'BasicForm',
})(MyForm);The "FormikBag":
- props (props passed to the wrapped component)
- resetForm
- setErrors
- setFieldError
- setFieldTouched
- setFieldValue
- setStatus
- setSubmitting
- setTouched
- setValues Note: errors, touched, status and all event handlers are NOT included in the FormikBag.