Components / Form / API / Form / 

Form

A subclass of React.Component.

Represents the KendoReact Form component.

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'));
NameTypeDefaultDescription

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.

In this article

Not finding the help you need?

Contact Support