javascript - ReduxForm : adding map input from a child component

Question

我有一个 Redux Form 组件，其中有一个名为 PlotMap 的 Google Maps 子组件。子组件将 map 输入作为回调中的对象传递回。我想在提交时将此 map 输入对象包含在表单数据中。我怎么做？我是否使用隐藏字段？ Redux Form 的奇妙工作对我来说是不透明的，所以我不确定在哪里附加对象。

PlotForm 组件:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import * as actions from '../../actions';
import { Link } from 'react-router';
import PlotMap from './plotMap';

const renderField = ({
    input,
    label,
    type,
    meta: { touched, error, warning }
}) => (
    <fieldset className="form-group">
        <label htmlFor={input.name}>{label}</label>
        <input className="form-control" {...input} type={type} />
        {touched && error && <span className="text-danger">{error}</span>}
    </fieldset>
);

class PlotForm extends Component {
    constructor(props) {
        super(props);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
    }

    handleFormSubmit(props) {
        this.props.addPlot(props);
    }

    render() {
        const { handleSubmit } = this.props;
        const user = JSON.parse(localStorage.getItem('user'));
        return (
            <div className="form-container text-center">
                <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
                    <Field
                        name="name"
                        component={renderField}
                        type="text"
                        label="Plot Name"
                    />
                    {user &&
                        user.role === 3 && (
                            <Field
                                name="company"
                                component={renderField}
                                type="text"
                                label="Company"
                            />
                        )}
                    <Field
                        name="grower"
                        component={renderField}
                        type="text"
                        label="Grower"
                    />
                    <Field
                        name="variety"
                        component={renderField}
                        type="text"
                        label="Variety"
                    />
                    <Field
                        name="variety2"
                        component={renderField}
                        type="text"
                        label="Variety 2"
                    />
                    <Field
                        name="planted"
                        component={renderField}
                        type="date"
                        label="Date Planted"
                    />
                    <hr />
                    <PlotMap getGeoJSON={GeoJSON => console.log(GeoJSON)} />
                    <div className="form-group">
                        <span>
                            <label>&nbsp;</label>
                            <button type="submit" className="btn btn-primary">
                                Add Plot
                            </button>
                        </span>
                    </div>
                </form>
                <hr />
                <div>
                    {this.props.errorMessage &&
                        this.props.errorMessage.plots && (
                            <div className="error-container">
                                Oops! {this.props.errorMessage.plots}
                            </div>
                        )}
                </div>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        errorMessage: state.plots.error
    };
}

PlotForm = reduxForm({ form: 'plot', validate })(PlotForm);
export default connect(mapStateToProps, actions)(PlotForm);

绘图组件:

import React, { Component } from 'react';
const { compose, withProps } = require('recompose');
const { withScriptjs, withGoogleMap, GoogleMap } = require('react-google-maps');
const {
    DrawingManager
} = require('react-google-maps/lib/components/drawing/DrawingManager');

const editTrack = polygon => {
    let GeoJSON = {
        type: 'Feature',
        geometry: {
            type: 'Polygon',
            coordinates: []
        },
        properties: {}
    };
    for (let point of polygon.getPath().getArray()) {
        GeoJSON.geometry.coordinates.push([point.lng(), point.lat()]);
    }
    return GeoJSON;
};

const PlotMap = compose(
    withProps({
        googleMapURL:
            'https://maps.googleapis.com/maps/api/js?key=myKey&v=3.exp&libraries=geometry,drawing,places',
        loadingElement: <div style={{ height: `100%` }} />,
        containerElement: <div style={{ height: `400px` }} />,
        mapElement: <div style={{ height: `100%` }} />
    }),
    withScriptjs,
    withGoogleMap
)(props => (
    <GoogleMap
        defaultZoom={8}
        defaultCenter={new google.maps.LatLng(32.095, 35.398)}>
        <DrawingManager
            onPolygonComplete={polygon => {
                polygon.setEditable(true);
                props.getGeoJSON(editTrack(polygon));
                google.maps.event.addListener(polygon.getPath(), 'insert_at', function(
                    index,
                    obj
                ) {
                    props.getGeoJSON(editTrack(polygon));
                });
                google.maps.event.addListener(polygon.getPath(), 'set_at', function(
                    index,
                    obj
                ) {
                    props.getGeoJSON(editTrack(polygon));
                });
            }}
            defaultDrawingMode={google.maps.drawing.OverlayType.POLYGON}
            defaultOptions={{
                drawingControl: true,
                drawingControlOptions: {
                    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                    position: google.maps.ControlPosition.TOP_CENTER,
                    drawingModes: [google.maps.drawing.OverlayType.POLYGON]
                }
            }}
        />
    </GoogleMap>
));

export default PlotMap;

Answer 1

如您所知，您可以将无状态函数(“renderField”)作为 component 属性传递给 Field。您可以将 PlotMap 包装在函数中，并仅将 onChange 处理程序连接到 getGeoJSON。

onChange方法描述如下:

A callback that will be called whenever an onChange event is fired from the underlying input.

此回调通知 redux-form 字段内容已更改，并更新 redux 存储。您可以手动调用它并传递数据，而不是使用 onChange 事件调用它。

redux-form 示例(未经测试):

<Field name="plotMap" component={({ input }) => (
  <PlotMap getGeoJSON={input.onChange} />
)}/>