我正在使用react-redux-form 7.2.3创建表单并提交。提交的值取自配置中的initialValues集，而不是从浏览器中的表单本身获取。我添加了验证功能但是如果我没有设置initialValues那么验证永远不会通过。我似乎无法弄清楚我在这里做错了什么。我是否需要每次手动设置initValues onChange
class SecurityExemptionsNew extends Component {
constructor(props) {
super(props);
this.handleShowError = this.handleShowError.bind(this);
this.initData = this.initData.bind(this);
this.renderSelectField = this.renderSelectField.bind(this);
this.renderTextField = this.renderTextField.bind(this);
this.updateCommsMatrix = this.updateCommsMatrix.bind(this);
this.renderSelect2Field = this.renderSelect2Field.bind(this);
this.clearValue = this.clearValue.bind(this);
this.updateValue = this.updateValue.bind(this);
this.getCommsmatrices = this.getCommsmatrices.bind(this);
this.fnToggleCheckboxes = this.fnToggleCheckboxes.bind(this);
this.handleCheckedValues = this.handleCheckedValues.bind(this);
this.meta = {
title: 'Request Exemption',
description: 'This section allows you to request an exemption'
};
this.passMetaBack = this.passMetaBack.bind(this);
this.runOnce = false;
this.state = {
loaded: false,
isLoading: true,
searchable: true,
selectValue: { value: '0', label: 'All'},
selectMarketValue : "Group Enterprise Technology (GET)",
clearable: true,
rtl: false,
options: [
{ value: '0', label: 'All'}
],
toggleChecked: true,
lm_security_engineer: '',
select_exemption_type: 'Security',
select_market: 'Group Enterprise Technology (GET)',
select_service_domain: 'Corporate (Internal/External)',
select_service_id: '0',
select_security_engineer: null,
select_business_priority: 'Low'
};
this.exemptionType = {};
this.markets = {};
this.serviceDomain = {};
this.servicesList = {};
this.matrices = {};
this.securityEngineerList = {};
this.securityEngineerLocalMarketList = {}
this.businessPriority = {}
this.tableOptions = {
paginationShowsTotal: false,
sizePerPageList: [ {
text: '10', value: 10
}, {
text: '50', value: 50
}, {
text: '100', value: 100
}
],
};
this.checkedValues = [];
}
componentDidMount() {
console.log("componentDidMount");
this.passMetaBack;
//this.props.initialize({ market: 'Group Enterprise Technology (GET)' });
//this.props.dispatch(change('SecurityExemptionsNewForm', 'market', 'Group Enterprise Technology (GET)'));
}
renderTextField(field) {
let value = '';
let readonly = false
if (field.label == 'Requestor') {
value = this.props.activeUser.email;
readonly = true;
}
return (
<div className="form-group">
<label className="control-label col-sm-2">{field.label}</label>
<div className="col-sm-10">
<input
name={field.input.name}
className="form-control form-control-inline"
type="text"
{...field.text}
defaultValue={value}
readOnly={readonly}
/>
</div>
{field.meta.error}
</div>
);
}
onSubmit(values){
console.log(values);
}
render() {
console.log(this);
if (!this.runOnce && this.props.isReady) {
this.runOnce = true;
this.initData();
}
const { handleSubmit } = this.props;
let form = 'Loading...';
if (this.state.loaded) {
let policiesTable = this.renderPolicies();
return (
<div className="container-fluid">
<form onSubmit={handleSubmit(this.onSubmit.bind(this))} className="form-horizontal">
<Field
label="Type"
loadFrom="exemptionType"
name="exemption_type"
component={this.renderSelectField}
/>
<Field
label="Market"
loadFrom="markets"
name="market"
component={this.renderSelectField}
/>
<Field
label="Service Domain"
loadFrom="serviceDomain"
name="service_domain"
component={this.renderSelectField}
type="select"
/>
<Field
label="Service/Project/Programme"
loadFrom="servicesList"
name="service_id"
component={this.renderSelectField}
type="select"
/>
<Field
label="Demand Ref"
name="demand_ref"
component={this.renderTextField}
type="text"
/>
<Field
label="Exemption Summary"
name="name"
component={this.renderTextField}
type="text"
/>
<Field
label="Exemption Description"
name="description"
component={this.renderTextareaField}
type="textarea"
/>
<div className="form-group">
<label className="control-label col-sm-2">Comms Matrix:</label>
<div className="col-sm-4">
<Async
multi={false}
value={this.state.selectValue}
onChange={this.updateValue}
valueKey="value"
labelKey="label"
loadOptions={this.getCommsmatrices}
onValueClick={this.gotoCommsmatrix}
cache={false}
/>
</div>
</div>
{policiesTable}
<Field
label="Requestor"
name="requestor"
component={this.renderTextField}
type="text"
readonly="readonly"
/>
<Field
label="Security Engineer"
loadFrom="securityEngineerList"
name="security_engineer"
component={this.renderSelectField}
type="select"
/>
{this.state.lm_security_engineer}
<Field
label="Link to Design Doc"
name="designdoc"
component={this.renderTextField}
type="text"
/>
<Field
label="Business Priority"
loadFrom="businessPriority"
name="business_priority"
component={this.renderSelectField}
type="select"
/>
<Field
label="Expiry date (dd-MMM-yy)"
name="expiry_date"
component={this.renderTextField}
type="text"
/>
<div className="form-group">
<div className="col-sm-offset-2 col-sm-10">
<button id="btnSubmit" type="submit" name="btnSubmit" className="btn btn-vodafone hidden-print">Submit</button>
</div>
</div>
</form>
</div>
);
}
return <div className="container-fluid">{form}</div>;
}
}
SecurityExemptionsNew = connect(mapStateToProps, mapDispatchToProps)(
SecurityExemptionsNew
);
function validate (values) {
console.log(values);
const errors = {};
if(!values.exemption_type){
errors.exemption_type = "Select exemption type";
}
if(!values.market){
errors.market = "select market";
}
if(!values.service_domain){
errors.service_domain = "select service domain";
}
if(!values.service_id){
errors.service_id = "Select a service";
}
if(!values.name){
errors.name = "Enter summary";
}
return errors;
}
export default reduxForm({
form: 'SecurityExemptionsNewForm', // a unique name for this form
validate,
initialValues: {
exemption_type: 'Security',
market: 'Group Enterprise Technology (GET)',
service_domain: 'Corporate (Internal/External)',
service_id: '0',
name: 'test',
security_engineer: '',
business_priority: 'Low'
}
})(SecurityExemptionsNew);
我也试过
export default reduxForm({
form: 'SecurityExemptionsNewForm', // a unique name for this form
validate,
initialValues: {
exemption_type: 'Security',
market: 'Group Enterprise Technology (GET)',
service_domain: 'Corporate (Internal/External)',
service_id: '0',
name: 'test',
security_engineer: '',
business_priority: 'Low'
}
})(
connect(mapStateToProps, mapDispatchToProps)(SecurityExemptionsNew)
);
答案 0 :(得分：0)
我认为订单必须是
<强> 1。 reduxForm
let form = reduxForm({
form: 'SecurityExemptionsNewForm', // a unique name for this form
validate,
initialValues: {
exemption_type: 'Security',
market: 'Group Enterprise Technology (GET)',
service_domain: 'Corporate (Internal/External)',
service_id: '0',
name: 'test',
security_engineer: '',
business_priority: 'Low'
}
})(SecurityExemptionsNew);
<强> 2。连接（）
SecurityExemptionsPage = connect(mapStateToProps, mapDispatchToProps)(form);
第3。导出
export { SecurityExemptionsPage as SecurityExemptionsNew };