SHARE
TWEET

Untitled

a guest Aug 23rd, 2019 54 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. interface FormValues {
  2.   name: string;
  3.   age: number;
  4. }
  5.  
  6. type FormProps = FormikProps<FormValues> & {
  7.   onDirtyChanged: (dirty: boolean) => void;
  8. };
  9.  
  10. const FormComponent = ({ dirty, onDirtyChanged }: FormProps) => {
  11.   React.useEffect(() => onDirtyChanged(dirty), [dirty]);
  12.   return (
  13.     <Form>
  14.       <div className="form">
  15.         <Input type="text" name="name" />
  16.         <Input type="number" name="age" />
  17.       </div>
  18.     </Form>
  19.   );
  20. };
  21.  
  22. interface SimpleFormProps {
  23.   onSubmit: (values: FormValues) => void;
  24.   onDirtyChanged: (dirty: boolean) => void;
  25. }
  26.  
  27. const SimpleForm = React.forwardRef<Formik<FormValues>, SimpleFormProps>(
  28.   ({ onSubmit, onDirtyChanged }: SimpleFormProps, ref) => {
  29.     const render = (props: FormikProps<FormValues>) => (
  30.       <FormComponent {...props} onDirtyChanged={onDirtyChanged} />
  31.     );
  32.  
  33.     return (
  34.       <Formik<FormValues>
  35.         ref={ref}
  36.         render={render}
  37.         initialValues={{
  38.           name: "",
  39.           age: 0
  40.         }}
  41.         onSubmit={onSubmit}
  42.       />
  43.     );
  44.   }
  45. );
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top