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

19
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); // вот тут передали нашу форму

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

READ ALSO
onMouseEnter и тачпад

onMouseEnter и тачпад

Дело в том что на блоке стоит обработчик onMouseEnter

30
Не срабатывает событие изменения sessinStorage

Не срабатывает событие изменения sessinStorage

При монтировании компонента устанавливаю обработчик изменения сессионного хранилища

15
Ошибка при запуске Service Worker PWA

Ошибка при запуске Service Worker PWA

Внедряю на сайт PWAПри запуске Service Worker возникает следующая ошибка:

46