Form

A subclass of React.Component.

Represents the KendoReact Form component.

jsx

export const FormInput = (fieldRenderProps) => {
    const onValueChange = React.useCallback(
        (event) => fieldRenderProps.onChange(event.target.value),
        [fieldRenderProps.onChange]
    );
    return (
        <input
            className={'k-input'}
            value={fieldRenderProps.value}
            onChange={onValueChange}
        />
    );
};

export const App = () => {
    const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem));
    return (
        <Form
            initialValues={{title: ''}}
            onSubmit={handleSubmit}
            render={(formRenderProps) => (
                <div>
                    <Field name={'title'} component={FormInput} />
                    <button
                        className="k-button"
                        disabled={!formRenderProps.allowSubmit}
                        onClick={formRenderProps.onSubmit}
                    >
                        Submit
                    </button>
                </div>
            )}
        />
    );
};

ReactDOM.render(<App />, document.querySelector('my-app'));

Name	Type	Default	Description
props	Readonly<FormProps>		The props of the Form component.

Methods

onChange
Method for emiting changes to a specific field outside the form component. Use onChange only if you cannot achieve the desired behavior through the Field component by FormRenderProps.
Parameters name string options { value: any; }

onReset
Method for resetting the form state outside the form component. Use onReset only if you cannot achieve the desired behavior through the Field component or by FormRenderProps.