Как передать значения из компонента в форму Redux - PullRequest
Новая
       36

Как передать значения из компонента в форму Redux

0 голосов
/ 05 июля 2018

Я использую форму Redux для формы в React.js, и моя форма была, и у меня есть пользовательский компонент карты Google, я хочу привязать 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 значений lat и long, когда пользователь перетаскивает маркер

Как передать значение console.log в редукс-форму?

Кто-нибудь может предложить, пожалуйста, способ сделать это?

Ответы [ 2 ]

0 голосов
/ 12 июля 2018

Здесь - мое рабочее решение, разветвленное из вашей песочницы.

Я только что добавил обратный вызов в ваш MyParentComponentWrapper компонент, который запускается каждый раз, когда изменяется положение маркера. В вашей форме вы прослушиваете обратный вызов и устанавливаете в поле position значение, полученное из MyParentComponentWrapper.

Мне нравится сохранять компоненты как можно более простыми и не связывать их с избыточным состоянием через connect. Просто думайте о вашем MyParentComponentWrapper как о поле ввода, которое генерирует событие change только каждый раз, когда его значение изменяется, не зная, как / где это значение будет использоваться.

В этом случае MyParentComponentWrapper просто показывает маркер и вызывает обратный вызов каждый раз, когда позиция маркера изменяется. Именно компонент формы отвечает за правильное обращение с этой позицией.

Вот как я изменил вашу визуализацию с помощью обратного вызова:

<MyParentComponentWrapper setPosition={onPositionSet} />

и вот обратный вызов в компоненте формы: 

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

где change функция была добавлена ​​в реквизиты вашего компонента, когда вы обернули ее в redux-form

0 голосов
/ 12 июля 2018

Здесь - это кодовая строка вашего приложения, использующая 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 в нашем компоненте!

...