Не обновляется Field в Redux-form

140

25 июня 2019, 19:50

Вот такой код:

components/Component.jsx

import React from 'react';
import EventCalendarModal from './EventCalendarModal';
export default ({data: { eventList, matchesList }, handleAdd, handleRemove, handleSubmit}) => (
  <div className="event-calendar">
    <EventCalendarModal handleSubmit={handleSubmit}/>
  </div>
);

components/Modal.jsx

import React from 'react';
import { Field } from 'redux-form';
import { Button } from 'react-bootstrap';
export default ({handleSubmit}) => (
  <form>
    <Field name="name" component="input" type="text"/>
    <Button onClick={handleSubmit}>Submit</Button>
  </form>
);

containets/reduxForm.js

import { reduxForm } from 'redux-form';
export default reduxForm({
  form: 'modalEditForm',
  initialValues: {
    eventDate: 'gsdfgsdfgsdfgsdfg',
    name: ''
  }
})

index.js

import EventCalendarComponent from "./components/EventCalendarComponent";
import EventCalendarContainer from "./containers";
import { compose } from 'ramda';
import withHandlers from "./containers/withHandlers";
import lifecycleComponent from "./containers/lifecycle";
import reduxForm from "./containers/reduxForm";
export default compose(
  EventCalendarContainer,
  lifecycleComponent,
  withHandlers,
  reduxForm,
)(EventCalendarComponent);

../---../rootReducer.js

import {combineReducers} from 'redux';
import matches from './Matches/reducer';
import tournaments from './Tournaments/reducer';
import accreditationsList from './Requests/reducer';
import files from './FilesUploading/reducer';
import editAccreditation from './EditRequests/reducer';
import eventCalendar from './Requests/components/EventCalendar/reducer';
import { reducer as formReducer } from 'redux-form'
export default combineReducers({
    accreditationsList,
    tournaments,
    matches,
    files,
    editAccreditation,
    eventCalendar,
    form: formReducer
});

redux-devtools

При вводе в Field в консоли логгируются экшены, но значение не меняется. Оно всегда пустое, даже если добавить initialValues. В чем может быть проблема?

Answer 1

Первое, что хотелось бы переписать это форма, сделаем на ней обработчик onSubmit, с кнопки при этом уберем onClick и добавим кнопке тип submit, обращаем внимание на филд, у него появился компонент - renderField:

export default ({handleSubmit}) => (
  <form onSubmit={handleSubmit}>
    <Field name="name" component={renderField} type="text" />
    <Button type="submit">Submit</Button>
  </form>
);

Также, тут рядышком объявим константу, в которой опишем наш input, чтобы в нем была некая логика (просто в этом же файле перед экспортом формы добавить эту константу):

const renderField = ({ input, label, type }) => (
  <input {...input} type={type} className="form-control" />
);

Далее ваш контейнер reduxForm вот внутри него нужно импортировать созданную вами форму из компонент и передать в качестве параметра, то есть должно быть как-то так:

import { reduxForm } from 'redux-form';
import Modal from './components/Modal'; // вот тут нужен правильный импорт (это я навскидку)
export default reduxForm({
  form: 'modalEditForm',
  initialValues: {
    eventDate: 'gsdfgsdfgsdfgsdfg',
    name: ''
  }
})(Modal); // вот тут передали нашу форму

Хотел написать комментарий, но он не поместился по размеру текста, поэтому дал ответ. Попробуйте внести эти правки в ваш код.