如何触发父母提交？答案

【问题标题】：How to trigger submit from parent?如何触发父母提交？
【发布时间】：2018-11-16 11:45:37
【问题描述】：

我想调用子组件的提交方法。因此我使用 ref 道具。但看起来我只是得到了一个 WithContext 对象。

那么如何在App > submitForm内部调用TodoForm > submit。

【问题讨论】：

从 App.js 传递 onSubmit={this.submitForm} 并从 TodoForm 在 Formik onSubmit 添加 this.props.onSubmit()
提交按钮在 TodoForm 之外。因此，提交应该在 TodoForm 之外触发。因此，TodoForm 的 onSubmit 属性将无济于事。
为什么把提交按钮放在外面？
例如引导模式，其中提交按钮位于模式页脚中，表单本身位于模式主体中。

【解决方案1】：

因为您将TodoForm 组件包装在withNamespaces HOC 中，所以获取对TodoForm 的引用不像调用ref={..} 那样容易，因为这会返回对HOC 的引用。要获取对组件的引用，您必须在创建 HOC 时利用 innerRef 参数（请参阅 docs）

const TodoFormTranslated = withNamespaces("", {
  innerRef: (ref) => VARIABLE_WHICH_WILL_NOW_CONTAIN_REF_TO_YOUR_EL = ref
})(TodoForm);

您的问题的快速但有效的解决方案如下所示：https://codesandbox.io/s/n55yvw1o2m

也许您不希望课堂之外的变量，所以我将把它留给您，您想以哪种方式处理它。例如，您可以从this post 获得灵感。

【讨论】：

这有助于解决您的问题吗？
很遗憾没有。我能够访问子组件中的方法，但我无法访问 formik 特定的道具，如 submitForm。所以我决定用 TodoForm 中的一个额外的道具来触发表单提交来解决这个问题。这样做的缺点是我需要编写额外的代码，但我没有其他办法。
但是您可以运行 TodoForm 的 submit 方法，对吗？这就是问题所说的。您可以为下一期发布另一个问题。
好的，从这个角度来看问题解决了。 :-)