基础Kendo React Form点击提交无响应，alert未触发的原因是什么？

问题描述 #

创建了一个基础Kendo React Form，点击「Submit」按钮时没有任何反应，alert函数未被调用。相关代码如下：

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"));

原因分析 #

问题核心是未关联Kendo Form内部的提交逻辑：

• Kendo React Form的render回调会返回包含表单核心交互逻辑的formRenderProps对象，其中的onSubmit或submit方法是触发表单提交的关键入口。
• 直接使用原生type="submit"按钮但未绑定Form提供的提交方法，Form组件无法识别提交动作，也就不会调用你定义的handleSubmit1回调。

修复方案 #

方案1：给FormElement绑定onSubmit事件 #

将formRenderProps.onSubmit绑定到FormElement的onSubmit属性上，让表单的提交动作关联到Kendo Form的逻辑：

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 onSubmit={formRenderProps.onSubmit}>
          <button type="submit" disabled={false}>
            Submit
          </button>
        </FormElement>
      )}
    />
  );
};

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

方案2：按钮点击调用submit方法 #

直接在按钮的onClick事件中调用formRenderProps.submit方法，手动触发表单提交：

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 onClick={formRenderProps.submit} disabled={false}>
            Submit
          </button>
        </FormElement>
      )}
    />
  );
};

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

说明 #

两种方案本质都是让表单提交动作触发Kendo Form内部的提交流程，从而调用你定义的onSubmit回调函数。

内容的提问来源于stack exchange，提问作者Black