我有一个表单,用于编辑包含多个文本输入字段的公司信息 .

表单可以处于“编辑”模式或“查看”模式 . 在“查看”模式下,文本字段全部被禁用,主按钮的标签为“编辑” . 如果用户按下“编辑”,则调度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不会:-(