Form onChange callback

[StefjJHK]

I Wrote this code:

export function TextField({ name, label, disabled, placeholder, className }: InputProps): ReactElement {
  const [{ value, onChange, ...field }] = useField({ name, placeholder });

  const onChangeWrapper = (_: string, e: SyntheticEvent<HTMLInputElement>) => {
    onChange(e);
  };

  return label ? (
    <FormGroup className={className} aria-disabled={disabled}>
      <FormControlLabel>{label}</FormControlLabel>
      <Input defaultValue={value} onChange={onChangeWrapper} {...field} type="text" />
    </FormGroup>
  ) : (
    <Input defaultValue={value} onChange={onChangeWrapper} {...field}></Input>
  );
}

export function Form<TValue extends FormikValues, TSchema extends Schema<TValue>>({
  defaultValue,
  schema,
  onSubmit,
  onChange,
  disabled,
  fluid,
  className,
  children
}: FormProps<TValue, TSchema>): ReactElement {
  return (
    <Formik initialValues={defaultValue} onSubmit={onSubmit} validationSchema={schema}>
      {({ handleSubmit, handleChange }) => {
        const onSubmitWrapper = (_: boolean, e: FormEvent<HTMLFormElement>) => {
          handleSubmit(e);
        };
        const onChangeWrapper = (value: FormikValues, e?: SyntheticEvent<Element, Event>) => {
          console.log('nani');
        };

        return (
          <StyledRsForm
            onSubmit={onSubmitWrapper}
            onChange={onChangeWrapper}
            disabled={disabled}
            className={className}
            fluid={fluid === undefined ? true : fluid}>
            {children}
          </StyledRsForm>
        );
      }}
    </Formik>
  );
}

Form onChange callback not called when input changes, Input OnChange triggers. Could someone help me with this?

[simonguo]

Form cannot track changes in the value of Input. You need to change Input to Form.Control.

<FormGroup className={className} >
  <FormControlLabel>{label}</FormControlLabel>
  <Form.Control accepter={Input}  />
</FormGroup>