Custom callback in onChange about uniforms HOT 6 CLOSED

function WholeModelField({ callback }) {
  const form = useForm();
  useEffect(() => {
    callback(form.model);
  // assuming there is a field named `files` at the root
  }, [form.model.files]);
  return null;
}

function FilesField(props) {
  const [field, form] = useField("files", props);
  useEffect(() => {
    props.callback(form.model);
  }, [form.model.files]);
  return <input type="file" />;
}

<AutoForm
      schema={schema}
      onChange={(key, value) => console.log("onChange", key, value)}
      onChangeModel={(model) => console.log("onChangeModel", model)}
  />

import React, { useEffect } from "react";
import { AutoFields, AutoForm } from "uniforms-mui";
import {
  connectField,
  FieldProps,
  filterDOMProps,
  GuaranteedProps,
  HTMLFieldProps,
  UnknownObject,
  useForm,
} from "uniforms";
import { bridge as schema } from "./schema/all-fields-schema";

class _FileField extends React.Component<
  HTMLFieldProps<string, HTMLInputElement> & { model: UnknownObject }
> {
  componentDidUpdate(): void {
    console.log("componentDidUpdate", this.props.model);
  }
  render() {
    return (
      <input
        onChange={(event) => this.props.onChange(event.target.files?.[0].name)}
        multiple={false}
        type="file"
      />
    );
  }
}

function withModelHoc<P extends UnknownObject>(
  Component: React.ComponentType<P>
) {
  return (props: Omit<P, "model">) => {
    const form = useForm();
    return <Component {...(props as P)} model={form.model} />;
  };
}

const FileField = withModelHoc(connectField(_FileField, { kind: "leaf" }));

export function App() {
  return (
    <AutoForm placeholder schema={schema}>
      <FileField name="text" />
    </AutoForm>
  );
}