Как включить Поля в редукс-форме после изменения состояния? - PullRequest
Новая
       43

Как включить Поля в редукс-форме после изменения состояния?

0 голосов
/ 10 декабря 2018

У меня есть форма для редактирования информации о компании, содержащая несколько полей ввода текста.

Форма может находиться в режиме «редактирования» или в режиме «просмотра».В режиме просмотра все текстовые поля отключены, а главная кнопка имеет метку «Редактировать».Если пользователь нажимает «Редактировать», отправляется действие companyEdit (true), и режим формы изменяется на «Редактировать».Затем основная кнопка меняет свою метку на «Сохранить», и поля СЛЕДУЕТ перерисовывать, на этот раз для редактирования.

Мне удалось заставить главную кнопку изменить свою метку, когда режим формы меняется с «править».в режиме «просмотра», однако поля не перерисовываются, чтобы перейти из отключенного в включенное состояние.Должен ли этот повторный рендеринг вызываться автоматически при изменении состояния или я должен вызывать его вручную?

Вот некоторый код: 

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import { companyEdit } from '../actions/Company';

class CompanyScreen extends Component {
  editButtonHandle = () => {
  }

  cancelButtonHandle = () => {
  }

  renderField = (field) => {
    const { mode } = this.props.editor;

    return (
      <div>
        <label>{field.label}</label>
        <input
          type="text"
          {...field.input}
          disabled = { mode != 'edit' }
        />
      </div>
    );
  }

  render() {
    const { handleSubmit, pristine, initialValues } = this.props;
    const { mode } = this.props.editor;
    return (
      <div>
        <form onSubmit={handleSubmit(this.onSubmit)}>
          <Field
            label="Name"
            name="name"
            component={this.renderField}
          />
          <Field
            label="E-mail"
            name="email"
            component={this.renderField}
          />
          <button
            type="button"
            onClick={this.editButtonHandle}
          >
            { mode == 'view' ? 'Edit' : 'Save'}
          </button>
        </form>
      </div>
    );
  }
}

const mapStateToProps = ({company}) => {
  const {info, editor} = company;
  return {
    initialValues: info,
    editor
  }
}

export default connect(
  mapStateToProps,
  { companyEdit }
)(
  reduxForm({
    form: 'CompanyForm',
    enableReinitialize : true
  })(CompanyScreen)
);

вот редуктор: 

import { COMPANY_EDIT } from '../constants/ActionTypes';

const INIT_STATE = {
    info: {
        id: "1",
        name: "My company",
        email: "mycompany@gmail.com",
    },
    editor: {
        mode: "view"
    }
}

  export default (state = INIT_STATE, action) => {
    switch (action.type) {
      case COMPANY_EDIT:
        const editor = {
          ...state.editor,
          mode: action.payload ? 'edit' : 'view'
        }
        return { ...state, editor: editor}
      default:
        return state;
    }
  }

Кнопка перерисовывается правильно, когда изменяется mode реквизит, но Field s нет: - (

...