如何无需手动修改表单字段即可提交Kendo React表单？

问题原因 #

• Kendo React Form 内置的allowSubmit属性判断逻辑为：表单校验通过 且 表单处于dirty（用户已手动修改过字段）状态时才返回true。
• 你通过key={JSON.stringify(user)}在更新用户数据时重置了表单实例，新的表单加载完初始值后默认处于pristine（无用户修改）状态，就算所有字段校验都符合要求，allowSubmit仍为false，因此提交按钮默认禁用，只有手动修改字段触发dirty状态后才能启用。

解决方案 #

方案一：自定义提交按钮禁用逻辑（最简单） #

直接用表单的校验状态控制按钮禁用，跳过dirty状态判断，将提交按钮的disabled属性修改为：

disabled={!formRenderProps.valid}

修改后只要所有字段校验通过，不管有没有手动修改，提交按钮都会启用，点击即可正常提交。

方案二：加载新数据后手动标记表单为已修改 #

如果需要保留allowSubmit的原有逻辑，可通过Ref手动更新表单的dirty状态：

1. 声明Form组件的Ref：

const formRef = React.useRef(null);

2. 给Form组件绑定Ref：

<Form ref={formRef} onSubmit={handleSubmit} initialValues={user} key={JSON.stringify(user)} ...其他属性>

3. 在加载新用户数据的方法中，等表单重置完成后手动标记为已修改：

const loadNewUser = () => {
  setUser({
    firstName: 'NewFirstName',
    lastName: 'NewLastName',
    email: 'NewEmails@email.com'
  });
  // 等待表单重新渲染完成后修改状态
  setTimeout(() => {
    formRef.current?.setIsDirty(true);
  }, 0);
};

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