Redux-Form使用“客户端”表单进行故障同时创建和编辑

Question

仍然是新手。

有人建议我可以使用客户端的形式来创建和编辑。我后来对Create和Edit都使用了相同的表单，但是现在遇到的问题是，当我重新加载页面时，我的表单字段没有离开表单字段，因为我在表单底部添加了与initialvalues的连接。

这是我如何设置的形式弥补终极版形式：

let ClientForm = reduxForm({ 
    form: CLIENT_FORM_NAME 
    })(Client); 

    let ClientForm2 = connect(
    state => ({ 
    initialValues: state.editClient, // pull initial values from client reducer 
    enableReinitialize: true 
    }), 
    { reducer } // bind client loading action creator 
)(ClientForm); 

export default ClientForm2; 

状态变化editClient更新果然表单字段与状态培训相关数据加载。精细。

但是，如果我这次重新加载表单作为创建或“新客户端”形式的原始详细信息表单编辑客户端仍然在字段中。

当状态中的isEditMode设置为false时，如何构造表单以不加载editClient详细信息（避免加载）initialValues？

这是使用表格进行决斗或更多目的的常见问题，并且是否存在简单/优雅的修复？

为了增加背景下，这里是整个窗体..其相当长所以我在最后连接吧..

import React, { PropTypes } from "react"; 
import { Field, reduxForm, FormSection } from "redux-form"; 
import { connect } from "react-redux"; 
import { Col, Row } from "react-bootstrap"; 
import { Button, Glyphicon, Panel } from "react-bootstrap"; 
import Moment from "moment"; 
import Address from "../../address/addressContainer"; 
import FormField from "../../formComponents/formField"; 
import CheckboxField from "../../formComponents/checkboxField"; 
import TextField from "../../formComponents/textField"; 
import StaticText from "../../formComponents/staticText"; 
import TextAreaField from "../../formComponents/textAreaField"; 
import DateField from "../../formComponents/datefield"; 

import reducer from "../edit/reducer"; 

export const CLIENT_FORM_NAME = "Client"; 

const required = value => (value ? undefined : "Required"); 
const maxLength = max => value => 
    value && value.length > max ? `Must be ${max} characters or less` : undefined; 
const number = value => 
    value && isNaN(Number(value)) ? "Must be a number" : undefined; 
const minValue = min => value => 
    value && value < min ? `Must be at least ${min}` : undefined; 
const email = value => 
    value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) 
    ? "Invalid email address" 
    : undefined; 
const tooOld = value => 
    value && value > 65 ? "You might be too old for this" : undefined; 
const aol = value => 
    value && /.+@aol\.com/.test(value) 
    ? "Really? You still use AOL for your email?" 
    : undefined; 

const normalizeMobilePhone = value => { 
    if (!value) { 
    return value; 
    } 

    const onlyNums = value.replace(/[^\d]/g, ""); 
    if (onlyNums.length <= 4) { 
    return onlyNums; 
    } 
    if (onlyNums.length <= 8) { 
    return `${onlyNums.slice(0, 4)} ${onlyNums.slice(4)}`; 
    } 
    return `${onlyNums.slice(0, 4)} ${onlyNums.slice(4, 7)} ${onlyNums.slice(
    7, 
    10 
)}`; 
}; 

export const Client = props => { 
    const { 
    handleSubmit, 
    companyValue, 
    isWarrantyCompanyValue, 
    isEditMode 
    } = props; 

    const { reset } = props; 

    return (
    <Row> 
     <Col md={12}> 
     <h2> 
      <Glyphicon glyph="edit" /> {isEditMode ? "Edit" : "New"} Client 
     </h2> 
     <hr /> 
     <form onSubmit={handleSubmit} className="form-horizontal"> 
      {isEditMode && 
      <Panel header={<h3>Client - Basic Details</h3>}> 
       <Row> 
       <Field 
        component={StaticText} 
        name="clientNo" 
        id="clientNo" 
        label="Client No." 
        fieldCols={4} 
        labelCols={4} 
        controlCols={8} 
       /> 

       <Field 
        component={StaticText} 
        name="dateCreated" 
        id="dateCreated" 
        label="Date Created." 
        fieldCols={4} 
        labelCols={4} 
        controlCols={8} 
       /> 

       <Field 
        component={StaticText} 
        name="userName" 
        id="userName" 
        label="Created By." 
        fieldCols={4} 
        labelCols={4} 
        controlCols={8} 
       /> 
       </Row> 

       <Row> 
       <Field 
        component={props => { 
        return (
         <StaticText {...props}> 
         <p className="form-control-static"> 
          <Glyphicon 
          glyph={props.input.value ? "ok" : "remove"} 
          />{" "} 
          {props.input.value 
          ? "Has jobs attached" 
          : "No jobs attached"} 
         </p> 
         </StaticText> 
        ); 
        }} 
        name="activity" 
        id="activity" 
        label="Activity" 
        fieldCols={4} 
        labelCols={4} 
        controlCols={8} 
       /> 

       <Field 
        component={CheckboxField} 
        name="active" 
        id="active" 
        label="De-Activate" 
        checkboxLabel="De activate this client" 
        fieldCols={4} 
        labelCols={4} 
        controlCols={8} 
       /> 
       </Row> 
      </Panel>} 

      <Panel header={<h3>Client - CompanyDetails</h3>}> 
      <Row> 
       <Field 
       component={CheckboxField} 
       id="company" 
       name="company" 
       label="Company?" 
       checkboxLabel="Client represents a company" 
       fieldCols={6} 
       labelCols={3} 
       controlCols={9} 
       /> 
      </Row> 
      {companyValue && 
       <div> 
       <Row> 
        <Field 
        component={TextField} 
        name="companyName" 
        id="companyName" 
        type="text" 
        label="Company Name" 
        placeholder="Enter company name..." 
        fieldCols={6} 
        labelCols={3} 
        controlCols={9} 
        /> 

        <Field 
        component={TextField} 
        name="abn" 
        id="abn" 
        type="text" 
        label="ABN." 
        fieldCols={6} 
        labelCols={3} 
        controlCols={5} 
        /> 
       </Row> 
       <Row> 
        <Field 
        component={CheckboxField} 
        id="isWarrantyCompany" 
        name="isWarrantyCompany" 
        label="Warranty Company?" 
        checkboxLabel="Client represents a warranty company" 
        fieldCols={6} 
        labelCols={3} 
        controlCols={9} 
        /> 
        {isWarrantyCompanyValue && 
        <Field 
         component={CheckboxField} 
         id="requiresPartsPayment" 
         name="requiresPartsPayment" 
         label="Requires Parts Payment?" 
         checkboxLabel="We pay for parts" 
         fieldCols={6} 
         labelCols={3} 
         controlCols={9} 
        />} 
       </Row> 
       <Row> 
        <Field 
        component={TextField} 
        name="companyEmail" 
        id="companyEmail" 
        type="email" 
        label="Spare Parts Email." 
        placeholder="Enter spare parts email..." 
        fieldCols={6} 
        labelCols={3} 
        controlCols={9} 
        /> 
       </Row> 
       </div>} 
      </Panel> 

      <Panel 
      header={ 
       <h3> 
       Client - {companyValue ? "Company Contact" : "Personal"} Details 
       </h3> 
      } 
      > 
      <Row> 
       <Field 
       component={TextField} 
       name="clientFirstName" 
       id="clientFirstName" 
       type="text" 
       label="First Name." 
       placeholder="Enter first name..." 
       fieldCols={6} 
       labelCols={3} 
       controlCols={9} 
       validate={[required]} 
       /> 

       <Field 
       component={TextField} 
       name="clientLastName" 
       id="clientLastName" 
       type="text" 
       label="Last Name." 
       placeholder="Enter last name..." 
       fieldCols={6} 
       labelCols={3} 
       controlCols={9} 
       /> 
      </Row> 

      <Row> 
       <Field 
       component={TextField} 
       name="mobilePhone" 
       id="mobilePhone" 
       type="text" 
       label="Mobile No." 
       placeholder="Enter mobile No..." 
       fieldCols={6} 
       labelCols={3} 
       controlCols={5} 
       normalize={normalizeMobilePhone} 
       /> 

       <Field 
       component={TextField} 
       name="phone" 
       id="phone" 
       type="text" 
       label="Phone No." 
       placeholder="Enter phone No..." 
       fieldCols={6} 
       labelCols={3} 
       controlCols={5} 
       /> 
      </Row> 

      <Row> 
       <Field 
       component={TextField} 
       name="email" 
       id="email" 
       type="email" 
       label="Email." 
       placeholder="Enter email address..." 
       fieldCols={6} 
       labelCols={3} 
       controlCols={9} 
       /> 
      </Row> 
      </Panel> 

      <FormSection name="Address"> 
      <Address /> 
      </FormSection> 

      <Panel header={<h3>Notes</h3>}> 
      <Row> 
       <Field 
       component={TextAreaField} 
       id="notes" 
       name="notes" 
       label="Notes." 
       placeholder="Enter notes here..." 
       fieldCols={12} 
       labelCols={1} 
       controlCols={11} 
       /> 
      </Row> 
      </Panel> 

      <Panel header={<h3>Client - Bank Details</h3>}> 
      <Row> 
       <Field 
       component={TextField} 
       name="bankName" 
       id="bankName" 
       type="text" 
       label="Bank Name." 
       placeholder="Enter bank name..." 
       fieldCols={4} 
       labelCols={4} 
       controlCols={8} 
       /> 

       <Field 
       component={TextField} 
       name="bsb" 
       id="bsb" 
       type="text" 
       label="BSB No." 
       placeholder="Enter BSB No..." 
       fieldCols={4} 
       labelCols={4} 
       controlCols={8} 
       /> 

       <Field 
       component={TextField} 
       name="account" 
       id="account" 
       type="text" 
       label="Account No." 
       placeholder="Enter Account No..." 
       fieldCols={4} 
       labelCols={4} 
       controlCols={8} 
       /> 
      </Row> 
      </Panel> 

      <div className="panel-body"> 
      <Row> 
       <Col xs={4}> 
       <Row> 
        <Col xs={8} xsOffset={4}> 
        <Button bsStyle="primary" type="submit" bsSize="small"> 
         <Glyphicon glyph="ok" /> Submit 
        </Button>{" "} 
        <Button type="reset" bsSize="small" onClick={reset}> 
         <Glyphicon glyph="ban-circle" /> Clear 
        </Button> 
        </Col> 
       </Row> 
       </Col> 
      </Row> 
      </div> 
     </form> 
     </Col> 
    </Row> 
); 
}; 

let ClientForm = reduxForm({ 
    form: CLIENT_FORM_NAME 
})(Client); 

let ClientForm2 = connect(
    state => ({ 
    initialValues: state.editClient, // pull initial values from client reducer 
    enableReinitialize: true 
    }), 
    { reducer } // bind client loading action creator 
)(ClientForm); 

export default ClientForm2; 

Answer 1

最简单的方法很可能会做这样的事情：

let ClientForm2 = connect(
    (state, ownProps) => ({ 
     initialValues: ownProps.isEditMode ? state.editClient : {}, // pull initial values from client reducer 
     enableReinitialize: true 
    }), 
    { reducer } // bind client loading action creator 
)(ClientForm);