Kendo React basic Form submit

Question

I've created a basic Kendo React Form, but nothing happens when I hit 'Submit'. Why doesn't the alert get called?

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Field, Form, FormElement } from "@progress/kendo-react-form";

const handleSubmit1 = (dataItem) => {
  alert(1);
};

const AppComponent = () => {
  return (
    <Form
      onSubmit={handleSubmit1}
   
      render={(formRenderProps) => (
        <FormElement>
          <button type={"submit"} disabled={false}>
            Submit
          </button>
        </FormElement>
      )}
    />
  );
};

ReactDOM.render(<AppComponent />, document.querySelector("my-app"));

Working example here:

https://codesandbox.io/s/black-currying-459p5h?file=/app/main.jsx

Did you provide the KendoReact licence key? – Spikatrix Apr 26 '23 at 07:03 — Spikatrix, Apr 26 '23 at 07:03
@Spikatrix only needed in Production – Black Apr 26 '23 at 07:30 — Black, Apr 26 '23 at 07:30

score 3 · Accepted Answer · answered Apr 26 '23 at 07:19

You need to add some input fields to your form for the user to enter data. Without any fields, the form won't have anything to submit, and your handleSubmit function won't be called. Just add some Field components to your Form.

Example:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Field, Form, FormElement } from "@progress/kendo-react-form";

const handleSubmit1 = (dataItem) => {
  alert(JSON.stringify(dataItem));
};

const AppComponent = () => {
  return (
    <Form
      onSubmit={handleSubmit1}
      render={(formRenderProps) => (
        <FormElement>
           // component attribute on <Field/> is mandatory! 
          <Field name="firstName" label="First name" component="input" />
          <button type="submit" disabled={!formRenderProps.allowSubmit}>
            Submit
          </button>
        </FormElement>
      )}
    />
  );
};

ReactDOM.render(<AppComponent />, document.querySelector("#my-app"));

Hope it helps :)

thank you. It seems a weird requirement – Black Apr 26 '23 at 07:48 — Black, Apr 26 '23 at 07:48

Kendo React basic Form submit

1 Answers1

Example: