Question

我在React.js中将Redux表单用于表单，我的表单是，并且我有一个自定义的Google Map组件，我想将lat和long绑定到我的表单

表格

import React from 'react';
import { Field, reduxForm } from 'redux-form';
const SimpleForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <div className="position-relative form-group">
        <label>First Name</label>
        <div>
          <Field
            name="firstName"
            component="input"
            type="text"
            placeholder="First Name"
            className="form-control"
          />
        </div>
      </div>
<Field name = 'eventLocation'
        component = {MyParentComponentWrapper} />
</form>
  );
};
export default reduxForm({
  form: 'simple', // a unique identifier for this form
})(SimpleForm);

，我的MyParentComponentWrapper代码为

import React from 'react';
import { compose, withProps, lifecycle } from 'recompose';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps';

const MyMapComponent = compose(
    withProps({
        googleMapURL:
            'https://maps.googleapis.com/maps/api/js?key=AIzaSyCYSleVFeEf3RR8NlBy2_PzHECzPFFdEP0&libraries=geometry,drawing,places',
        loadingElement: <div style={{ height: `100%` }} />,
        containerElement: <div style={{ height: `400px` }} />,
        mapElement: <div style={{ height: `100%` }} />,
    }),
    lifecycle({
        componentWillMount() {
            const refs = {};

            this.setState({
                position: null,
                onMarkerMounted: ref => {
                    refs.marker = ref;
                },

                onPositionChanged: () => {
                    const position = refs.marker.getPosition();
                    console.log(position.toString());
                },
            });
        },
    }),
    withScriptjs,
    withGoogleMap
)(props => (
    <GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }}>
        {props.isMarkerShown && (
            <Marker
                position={{ lat: -34.397, lng: 150.644 }}
                draggable={true}
                ref={props.onMarkerMounted}
                onPositionChanged={props.onPositionChanged}
            />
        )}
    </GoogleMap>
));

class MyParentComponentWrapper extends React.PureComponent {
    state = {
        isMarkerShown: false,
    };

    render() {
        return (
            <div>
                <MyMapComponent isMarkerShown={true} />
            </div>
        );
    }
}

export default MyParentComponentWrapper;

此组件将控制台。当用户拖动标记时，记录纬度和经度值

如何将console.log值传递给redux-form？

有人可以建议这样做吗？

Answer 1

Here是使用redux-form的应用程序的代码框。请注意，在latLngForm.js中设置表单后，当您移动标记时，我在地图容器中使用connect来dispatch reduxForm的change操作。这就是商店的更新。

我还将position作为prop传递给<MyMapComponent />，以设置标记的位置。这意味着标记的位置始终基于表单的值，并且移动地图的标记会手动更改表单的值。这样，您可以通过字段或通过拖放标记来手动设置位置。

mapStateToProps中的

<MyMapComponent />是这里的重要内容。 redux-form会自动为我们存储状态中的值，这是我们在其中检索值的地方。

请注意文件顶部的这些行：

import { change, formValueSelector } from "redux-form";
...
const formSelector = formValueSelector("form");

这将设置我们的表单选择器。 "form"是表单的标识符。现在，要从我们的州检索这些值，我们要做：

const mapStateToProps = (state) => ({
    position: {
        lat: formSelector(state, 'lat'),
        lng: formSelector(state, 'lng') // The key here is the name you passed into the field.
    }
});

然后我们使用connect将组件实际连接到商店：

connect(mapStateToProps)(MyMapComponent);

Redux发挥了不可思议的作用，现在我们的字段可以通过this.props.position在组件中使用！

Answer 2

Here是我的工作解决方案，是从您的沙箱中派生的。

我刚刚在您的MyParentComponentWrapper组件中添加了一个回调，每次标记位置更改时都会触发该回调。在您的表单中，您侦听回调，并使用从position接收的值设置MyParentComponentWrapper字段。

我想使组件尽可能简单，而不要通过connect将它们连接到redux状态。只需将您的MyParentComponentWrapper视为一个输入字段即可，每次输入change事件的值更改时都会触发该事件，而无需知道该值的使用方式/位置。

在这种情况下，MyParentComponentWrapper仅显示一个标记，并在标记位置每次更改时调用一个回调。表单组件是负责正确处理此职位的人。

这是我通过回调更改表单呈现的方法：

<MyParentComponentWrapper setPosition={onPositionSet} />

这是表单组件中的回调：

const onPositionSet = (position) => {
    props.change("position", position);
}

在将change函数包装在redux-form中的过程中，<div class="row"> <div class="col-md-4"> <h2>User Name: @User.Identity.Name</h2> <p> Test site with Active Directory @if (User.IsInRole("Group1")) { Only users that belong to Group 1 should see this section } </p> <p></p> </div> @if (User.IsInRole("Group2")) { <div class="col-md-4"> <label>Only users that belong to Group 2 should see this section</label> </div> } @if (User.IsInRole("Group3")) { <div class="col-md-4"> <label>Only users that belong to Group 3 should see this section</label> </div> }函数已经添加到了组件道具中。

如何将值从on组件传递到Redux表单

2 个答案: