Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Form page with react ref warning #18707

Closed
afc163 opened this issue Sep 6, 2019 · 9 comments

Comments

@afc163
Copy link
Member

commented Sep 6, 2019

image

@afc163

This comment has been minimized.

Copy link
Member Author

commented Sep 7, 2019

@afc163

This comment has been minimized.

Copy link
Member Author

commented Sep 7, 2019

这里很奇怪,按道理 function component 不用 React.forwardRef 会有问题?但是 Dragger 运行好像很正常。@zombieJ 帮忙看看?

@fireairforce

This comment has been minimized.

Copy link

commented Sep 8, 2019

我也很好奇= =

@fireairforce

This comment has been minimized.

Copy link

commented Sep 9, 2019

函数式组件如果用form.create包裹之后,然后父组件利用hooks API去调用子组件的方法,调用不到QAQ

@andyyxw

This comment has been minimized.

Copy link

commented Sep 12, 2019

函数式组件如果用form.create包裹之后,然后父组件利用hooks API去调用子组件的方法,调用不到QAQ

是的,目前我是把父组件用 Form.create 包裹,然后把 form 传下去,但是感觉不太好,父组件 render 的太频繁。

@fireairforce

This comment has been minimized.

Copy link

commented Sep 12, 2019

函数式组件如果用form.create包裹之后,然后父组件利用hooks API去调用子组件的方法,调用不到QAQ

是的,目前我是把父组件用 Form.create 包裹,然后把 form 传下去,但是感觉不太好,父组件 render 的太频繁。

这个问题我解决了,我是在使用了forwardRef()和useImpertive()这个API,在子组件里面同时往父组件里面传form和子组件的方法就可以了,父组件那边用useRef就可以拿到对应的方法了。

@fireairforce

This comment has been minimized.

Copy link

commented Sep 12, 2019

函数式组件如果用form.create包裹之后,然后父组件利用hooks API去调用子组件的方法,调用不到QAQ

是的,目前我是把父组件用 Form.create 包裹,然后把 form 传下去,但是感觉不太好,父组件 render 的太频繁。

可以看看这个demo https://codesandbox.io/s/wrappedcomponentref-upzhn

@andyyxw

This comment has been minimized.

Copy link

commented Sep 12, 2019

可以看看这个demo https://codesandbox.io/s/wrappedcomponentref-upzhn

谢谢,在项目里试了下可行。之前看了React文档后就是用forwardRef+useImperativeHandle传值,没意识到Form也能这么玩,还是得弄懂原理。

还有个问题,如果子(函数)组件还被其他HOC包裹了,比如Reduxconnect,那么父组件wrappedComponentRef还是会报错。

@zombieJ

This comment has been minimized.

Copy link
Member

commented Sep 12, 2019

Form 内部会给 Field 添加 ref 以实现 validateAndScroll,Dragger 换成了 FC 后 ref 不到就报错了。一个是 forwardRef 给 Upload,一个是换回 Class Component 因为用了 useImperativeHandlefindDOMNode 找不到真实的节点:https://codesandbox.io/s/sad-wind-jztju

PS:v4 版本实现机制不一样,不会有这个问题

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.