ant-design / ant-design/pro-components

🐛[BUG] ProTable 使用 ignoreRules + onValuesChange 调用 formeRef.submit() 无法触发request

Open
#9,236 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

提问前先看看:

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

### 🐛 bug 描述

在 ProTable 的 `form` 配置中使用 `ignoreRules: false` 且在 `onValuesChange` 中调用 `formRef.current?.submit()` ,具备rules的表单触发valuechange 和submit,但是无法按预期触发request。

使用 `setTimeout` 或 `requestAnimationFrame` 等变通方法来确保表单状态更新后再调用`formRef.current?.submit()` 提交可以解决。

可能是在触发 `onValuesChange` 时,表单状态还没有完全更新

### 📷 复现步骤

1. 创建一个 ProTable 组件,配置具备rules的search formItem columns配置
2. ProTable配置 `form` 属性,1. 设置 ignoreRules 为false使 rules生效, 2. 设置`onValuesChange` 回调
3. 在 `onValuesChange` 回调中直接调用 `formRef.current?.submit()`
4. 控制台观察到search表单可以触发valuechange,再触发 submit,但是id表单(具备rules)不会触发后续流程(proTable的request),也不会触发校验,而titile表单(不具备rules)可以正常触发request

可复现代码:

```tsx
{
console.log('触发request', params);
return {
data: [{ id: 1, title: '123' }],
success: true,
total: 1,
};
}}
form={{
ignoreRules: false,
onValuesChange: (changedValues: any, allValues: any) => {
console.log("onValuesChange", changedValues, allValues);
// ✅ 输入title表单项(没有rules),可以正常在change后触发request
// ❌ 但是当修改id表单项(具备rules的表单item)时没有触发后续流程(request),可以正常触发valuechange且取到formref以及调用submit
formRef.current?.submit();
// 使用settimeout 0 或者使用 Promise.resolve().then() 包裹formref可以解决
},
}}
/>
```

```ts
const columns: ProColumns[] = [
{
title: 'id',
dataIndex: 'id',
},
{
title: 'Title',
dataIndex: 'title',
formItemProps: {
rules: [
{
required: true,
message: 'This field is required',
},
],
},
},
];
```

### 🏞 期望结果

在 `onValuesChange` 回调中直接调用 `formRef.current?.submit()` 应该能够正常工作,无需使用 `setTimeout` 或其他变通方法。

### 💻 复现代码

https://codesandbox.io/p/sandbox/misty-cache-yjdr6m

### © 版本信息

- ProComponents 版本: 2.8.6
- umi 版本
- 浏览器环境
- 开发环境:mac OS

### 🚑 其他信息

猜测在 src/form/BaseForm/BaseForm.tsx 最接近 Ant Design Form 的地方统一修复:

Image

1. 在 ProTable 的 form 配置中定义 onValuesChange 回调被传递给 FormRender 组件
2. FormRender组件将它传递给 BetaSchemaForm 组件
3. BetaSchemaForm 组件将它传递给 ProForm 组件
4. ProForm 组件基于 BaseForm 组件
5. BaseForm 组件最终将它传递给 Ant Design 的 Form 组件

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue with the linked CodeSandbox, then inspect src/form/BaseForm/BaseForm.tsx and the FormRender, BetaSchemaForm, and ProForm path described in the report. Verify that calling formRef.current?.submit() from onValuesChange triggers request and validation for fields with rules without setTimeout or requestAnimationFrame.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.