[v2] useField: bound name to onChange and onBlur

🚀 Feature request

Current Behavior

I’m using useField on react-native and since TextInput has no name attribute, I need to bind name to handlers manually:

const TextField: React.SFC<TextFieldProps> = ({ name, ...props }) => {
  const [field] = useField(name);

  return (
    <TextInput
      {...props}
      value={field.value}
      onChangeText={field.onChange(name)}
      onBlur={field.onBlur(name)}
    />
  );
};

Desired Behavior

I spect to use onChange and onBlur handlers like this:

const TextField: React.SFC<TextFieldProps> = ({ name, ...props }) => {
  const [field] = useField(name);

  return (
    <TextInput
      {...props}
      value={field.value}
      onChangeText={field.onChange}
      onBlur={field.onBlur}
    />
  );
};

Suggested Solution

Bind name in formik.getFieldProps. I think here: https://github.com/jaredpalmer/formik/blob/377c36e3d1fecc0f0556d0218a18725ad04a7505/src/Formik.tsx#L765-L770 It should be replaced with:

      const field: FieldInputProps<any> = {
        name,
        value: valueState,
        onChange: handleChange(name),
        onBlur: handleBlur(name),
};

Can this break useField for web users?

Possible workarounds

Create a useFieldNative:

import * as React from 'react';

import { useField, FieldMetaProps } from 'formik';

interface FieldInputNativeProps {
  value: string;
  onChangeText: (text: string) => void;
  onBlur: () => void;
}

export default function useFieldNative(
  name: string,
): [FieldInputNativeProps, FieldMetaProps<any>] {
  const [field, meta] = useField(name);
  const onChangeText = React.useCallback(field.onChange(name), [
    name,
    field.onChange,
  ]);
  const onBlur = React.useCallback(() => field.onBlur(name), [field, name]);

  const fieldNative: FieldInputNativeProps = {
    value: field.value,
    onChangeText,
    onBlur,
  };

  return [fieldNative, meta];
}


const TextField: React.SFC<TextFieldProps> = ({ name, ...props }) => {
  const [field] = useFieldNative(name);

  return <TextInput {...props} {...field} />;
};

Who does this impact? Who is this for?

react-native users

[jaredpalmer]

Add it to formik native

[zingerj]

Seemed like it was out of date so I implemented the same thing in #2176, will also update the docs and tests accordingly.