在 React 中尝试从父级到子级调用方法时遇到困难，子级是 AntD 表单组件答案

【问题标题】：Difficulty trying to call a method from a parent to a child in React, with the child being an AntD form component在 React 中尝试从父级到子级调用方法时遇到困难，子级是 AntD 表单组件
【发布时间】：2019-05-04 04:43:21
【问题描述】：

我有一个名为“CollectionsPage”的组件，我试图在其中创建对子项的引用，并通过其 onClick 函数调用其方法之一。

这样做的原因是因为我希望子组件处理自己的状态，而不是从父组件向下传递。孩子被称为“CollectionsCreateForm”，我目前只有一个名为“test”的函数。我试图调用该函数，但它从未运行——但是，当我从不同的组件尝试相同的函数时，它起作用了。 AntD的form-within-a-modal有什么给我带来困难的地方吗？

我已尝试更改引用，并且我还将 'wrappedComponentRef' 传递给 child 以确保这不是问题。我需要能够访问孩子的表单，但 AntD 说它需要作为来自父母的道具传入。我很想将“onCreate”方法放在子级中，因此模态可以在没有父级帮助的情况下处理它应该处理的所有事情，但我相信它需要对 formRef 的引用。

我在沙盒上做了一个我的问题的例子。 Here 是链接。

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

当使用 antd 创建表单时，您基本上使用高阶组件 - (Form.create(Component))，它将您的 component 与内部的 test 方法包装在一起。

this.testRef.current 将引用您的高阶组件，基本上是 Form.create 类而不是您自己的组件。

您可以像这样使用 wrappedComponentRef 来获取对您自己的组件的引用：

<CollectionCreateForm
  wrappedComponentRef={(inst) => this.formRef = inst} 
/>

然后只需拨打this.formRef.test();

这是一个工作示例： https://codesandbox.io/s/n34ppwnq9j

【讨论】：