Comments (6)
Yeah, right, I totally forgot about this option :D
Thanks :)
from uniforms.
Hi @mariusrak,
We're currently working on uniforms v4.0, and it's not likely that we will extend the onChange
functionality in v3. I'll bring up that topic in our weekly meeting, and we'll consider this in v4.0
or v4.x
.
If I understand correctly, you must run the callback at the Field level. It's true that we can't pass a callback to the onChange
directly. However, you can access the whole model
by using useForm
that returns the uniforms context. Then, you can use useEffect
to run the callback with the whole model
. Use the dependency array to trigger the effect when only certain fields on the model change.
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;
}
To make it even simpler, you can use the second argument of useField
, which also provides the uniforms form context.
function FilesField(props) {
const [field, form] = useField("files", props);
useEffect(() => {
props.callback(form.model);
}, [form.model.files]);
return <input type="file" />;
}
Another workaround at the form level if that also suits you, is by using the onChange
prop on the form directly or the onChangeModel
.
<AutoForm
schema={schema}
onChange={(key, value) => console.log("onChange", key, value)}
onChangeModel={(model) => console.log("onChangeModel", model)}
/>
from uniforms.
Unfortunately my files field is class component, not function component and therefore I cannot use hooks. I'd have to implement it in whole form and that would mean lower reusability of files field component.
from uniforms.
You can always use the HOC approach.
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>
);
}
from uniforms.
Hi I recently stumbled upon a scenario where I would again use such function and it was not in a custom field but in a quite more complicated and non-reusable component where even use of useEffect was problematic, so I would really use the callback in onChange. So I vote once again for it.
from uniforms.
Hi @mariusrak, could you provide more technical details? The description is too mysterious.
Were you able to use useEffect
in that non-reusable component?
from uniforms.
Related Issues (20)
- Deprecate packages
- componentWillUnmount causing setState to be set to () => {} in Next.js HOT 3
- Array of arrays of object not showing inputs
- zod "lazy" support
- Support for jsonschema "const" keyword overriding "type"
- Add showInlineError to unstyled HOT 1
- Unknown type error for nullable() and nullish() HOT 1
- Error 'parent.value is undefined' for z.string().array().optional()
- Blank field gives error even though optional
- Support indeterminate checkbox HOT 2
- Add Example Of Progressive Disclosure HOT 2
- Make uniforms available on JSR
- Migrate `NumField` AntD tests to @testing-library/react
- Migrate `SelectField` tests to @testing-library/react
- Migrate `NestField` MUI tests to @testing-library/react
- Remove `enzyme`
- Warning: Text: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead. HOT 1
- When I use discriminator, I am getting an error where it can't find the specific field HOT 1
- More complex onChange HOT 2
- Undocumented JSONSchemaBridge breaking change in v4 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from uniforms.