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-textbox'}
            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'));

props Readonly<FormProps> intersected with Readonly<{ children?: ReactNode; }>

The props of the Form component.

 /