Question

我是新来的反应者。如何在自定义组件（位置选择器）上实现setfieldvalue？

到目前为止，我尝试过的是在onDragEnd函数上触发setfieldvalue

这是我到目前为止一直在进行的演示https://codesandbox.io/s/frosty-napier-smjxj

当我拖动标记时，出现错误。我的预期结果将是更新location对象的值。谢谢！

Answer 1

您无法直接从onDragEnd回调中访问标记位置，必须在父组件以及onChange函数中维护引用。（还必须设置ref回调标记）

componentWillMount() {
    const { setFieldValue } = this.props;
    const refs = {};
    this.setState({
      position: null,
      setMarkerRef: ref => {
        refs.marker = ref;
      },
      onMarkerDrag: () => {
        const lat = refs.marker
          .getPosition()
          .lat()
          .toString();
        const lng = refs.marker
          .getPosition()
          .lng()
          .toString();
        setFieldValue('latLng',{lat, lng});
      }
);}

如上所述。然后，您可以将它作为道具传递给MapComponent，

<MapComponent onDragEnd={this.state.onMarkerDrag}  onMarkerMounted={this.state.setMarkerRef} />

，然后在您的<Marker/>

    <Marker
       position={center}
       onDragEnd={onDragEnd}
       draggable={isMarkerDraggable}
       ref={props.onMarkerMounted}
     />

如何使用Formik实现我的自定义Google Map组件的SetFieldValue

1 个答案: