Form 滚动对 Upload 无效 about ant-design

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• react-j7cmsc (Open reproduction)

[Wxh16144]

示例中的代码需要调整一下，antd 内置组件获取逻辑是优先判断转发的 ref

source code：

ant-design/components/form/hooks/useForm.ts

Lines 26 to 41 in 470e8a8

	function getFieldDOMNode(name: NamePath, wrapForm: FormInstance) {
	const field = wrapForm.getFieldInstance(name);
	if (field instanceof HTMLElement) {
	return field;
	}
	if (field?.nativeElement instanceof HTMLElement) {
	return field.nativeElement;
	}
	const fieldId = getFieldId(toArray(name), wrapForm.__INTERNAL__.name);
	if (fieldId) {
	return document.getElementById(fieldId);
	}
	}

调整示例

-const ItemChildrenWrapper = (props: any) => {
+const ItemChildrenWrapper = React.forwardRef((props: any, ref) => {
   const { children, ...rest } = props
-  return React.cloneElement(children, rest)
-}
+  return React.cloneElement(children, { ...rest, ref })
+})

[crazyair]

嗯，也找了 id，但是 display none 了

[crazyair]

 return React.cloneElement(children, { ...rest, ref })

不能这样改，Upload 本身的 ref 方法没了

[Wxh16144]

群里已经讨论过了，贴一下结论：

antd 的 Form.Item 会合并 children 的 ref， 具体可以看一眼 https://github.com/ant-design/ant-design/blob/8b8021083ee9b6b1db305b62ff007503f8106ccd/components/form/hooks/useItemRef.ts Form.Item 是如何获得 ref 的