Rank 1
Iron
I am developing a data entry form that involves complex relationships between individual fields and the data service. I may be in a situation where Form.onChange may be helpful, but I'm not sure. The online documentation says "Use onChange only if you cannot achieve the desired behavior through the Field component by FormRenderProps." but doesn't actually given an example. How do I call this method?
Note: This is not about FieldRenderProps.onChange.
Do I have to stick the component in a variable and call the method directly? Is it like this?function FuncyComponent() {
const someData = {id: 123, etc};
const form = <Form initialValues={someData} render={formRenderProps =>
<FormElement>some fields</FormElement>} />;
const handleButtonClick = (event: whatever) => {
form.onChange("id", {value: 9876});
};
return <div>
{form}
<button onClick={handleButtonClick}>Change The ID</button>
</div>;
}
1 Answer, 1 is accepted
Hello, Brent,
Yes, this is the approach.
We need to take the ref of the component and then use it like this:
const MyForm = React.useRef() <Form
ref={MyForm}MyForm.current.onChange('someField', {value: someValue});Regards,
Stefan
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Iron
const formRef = React.useRef<Form>(null);
I had to use "(null)" and not just "()" because "()" returns a MutableObjectRef<T>. "(null)" returns a Ref<T>. Form's ref property is of type LegacyRef<Form>. React defines those ref types like this:
type LegacyRef<T> = string | Ref<T>;
type Ref<T> = RefCallback<T> | RefObject<T> | null;
type LegacyRef<T> = string | Ref<T>;
And it defines a few useRef overloads like this:
function useRef<T = undefined>(): MutableRefObject<T | undefined>; // Note: no parameter!
function useRef<T>(initialValue: T|null): RefObject<T>; // Note: takes a parameter!
So you have to do "(null)" to get an object TypeScript believes is compatible with Form's ref property.