还是新手。
有人建议我可以使用客户端表单进行创建和编辑。我随后对Create和Edit使用了相同的表单，但是当我重新加载页面时，我现在遇到了没有离开表单字段的初始值的问题，因为我在表单的底部添加了与initialvalues的连接。
以下是我为redux表单设置表单的方法：
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;