如何在将Google Map与蚂蚁设计Form.Item一起使用时设置表单值？

Question

我创建了一个自定义<GoogleMap />组件（react-google-map的包装器），该组件在GoogleMap组件的onClick事件上返回纬度，经度和缩放级别。现在，我想用ant.design的{​​{1}} Form.Item组件将其包装起来，但是找不到解决方法？ 我所能做的就是

form.getFieldDecorator

单击事件确实登录到控制台，但未设置值或未调用getValueFromEvent函数。任何帮助表示赞赏。

Answer 1

您希望Form控制您的组件（GoogleMap）。

在这种情况下，您需要一个controlled component，应该实现这样的组件，并让Form传递对它的引用。

例如对于功能组件，您使用forwardRef。

您应该在提供的代码中非常仔细地阅读getFieldDecorator documentation，使用onClick显然不会使您的组件成为受控组件，因此它会覆盖Form调用{{ 1}}个事件。

简单来说：实现一个受控组件并定义options parameters来告诉onClick他应该如何控制您的组件。

在下一个示例中，Form的行为类似于ControlledComponent，并且GoogleMaps组件具有Select和value属性作为默认属性，这种行为允许{{1 }}以更新其值（单击提交后检查日志）

onChange