У меня есть форма для редактирования информации о компании, содержащая несколько полей ввода текста.
Форма может находиться в режиме «редактирования» или в режиме «просмотра».В режиме просмотра все текстовые поля отключены, а главная кнопка имеет метку «Редактировать».Если пользователь нажимает «Редактировать», отправляется действие 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 нет: - (