Browse Source

docs(form): update faq for scrollToFirstError (#43640)

* docs(form): update faq for scrollToFirstError

* Update components/form/index.en-US.md

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: xliez <xliez@foxmail.com>

---------

Signed-off-by: xliez <xliez@foxmail.com>
Co-authored-by: afc163 <afc163@gmail.com>
pull/43644/head
xliez 1 year ago
committed by GitHub
parent
commit
48becf9cb1
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 8
      components/form/index.en-US.md
  2. 8
      components/form/index.zh-CN.md

8
components/form/index.en-US.md

@ -592,12 +592,18 @@ React can not get correct interaction of controlled component with async value u
}
</style>
### `scrollToFirstError` and `scrollToField` not working on custom form control?
### `scrollToFirstError` and `scrollToField` not working?
1. use custom form control
See similar issues: [#28370](https://github.com/ant-design/ant-design/issues/28370) [#27994](https://github.com/ant-design/ant-design/issues/27994)
`scrollToFirstError` and `scrollToField` deps on `id` attribute passed to form control, please make sure that it hasn't been ignored in your custom form control. Check [codesandbox](https://codesandbox.io/s/antd-reproduction-template-forked-25nul?file=/index.js) for solution.
2. multiple forms on same page
If there are multiple forms on the page, and there are duplicate same `name` form item, the form scroll probably may find the form item with the same name in another form. You need to set a different `name` for the `Form` component to distinguish it.
### Continue, why not use `ref` to bind element?
Form can not get real DOM node when customize component not support `ref`. It will get warning in React Strict Mode if wrap with Class Component and call `findDOMNode`. So we use `id` to locate element.

8
components/form/index.zh-CN.md

@ -591,12 +591,18 @@ React 中异步更新会导致受控组件交互行为异常。当用户交互
}
</style>
### 自定义表单控件 `scrollToFirstError``scrollToField` 失效?
### `scrollToFirstError``scrollToField` 失效?
1. 使用了自定义表单控件
类似问题:[#28370](https://github.com/ant-design/ant-design/issues/28370) [#27994](https://github.com/ant-design/ant-design/issues/27994)
滚动依赖于表单控件元素上绑定的 `id` 字段,如果自定义控件没有将 `id` 赋到正确的元素上,这个功能将失效。你可以参考这个 [codesandbox](https://codesandbox.io/s/antd-reproduction-template-forked-25nul?file=/index.js)。
2. 页面内有多个表单
页面内如果有多个表单,且存在表单项 `name` 重复,表单滚动定位可能会查找到另一个表单的同名表单项上。需要给表单 `Form` 组件设置不同的 `name` 以区分。
### 继上,为何不通过 `ref` 绑定元素?
当自定义组件不支持 `ref` 时,Form 无法获取子元素真实 DOM 节点,而通过包裹 Class Component 调用 `findDOMNode` 会在 React Strict Mode 下触发警告。因而我们使用 id 来进行元素定位。

Loading…
Cancel
Save