当我尝试填充一个redux-form V6时，我有点迷路。 我正在尝试使用个人和公司详细信息创建联系表单。由于我是反应宇宙的新手，我从一个Doc / Tutorial跳到另一个......所以它可能看起来有点混乱。
有没有办法调试表单？我只是看到我的请求返回了一个联系人，但我不知道它是否已经到达表格。
我使用react-router链接到：
/ contacts / contact /：id - ＆gt;填充的联系表格
由于redux / routerv4问题，我必须将我的React.Component包装在withRouter中以获取道具中的参数。我不知道如何连接到路由器和mapDispatchToProps，所以我的Contact Component看起来如下：
import React from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { FormattedMessage } from 'react-intl';
import {getContact} from "../../../Actions/contactsActions";
import ContactForm from './Forms/ContactForm';
@connect((store) => {
return {
contacts: store.contacts,
countries: store.countries,
contactCategories: store.contactCategories
}
})
class Contact extends React.Component {
constructor(props) {
super(props);
this.state = {
errors: {},
};
}
componentWillMount() {
if(this.props.match.params.id) {
this.props.dispatch(getContact(this.props.match.params.id));
}
}
handleSubmit(data) {
console.log(data);
}
render() {
return (
<div className="contact-container">
<ContactForm onSubmit={this.handleSubmit} />
</div>
)
}
}
export default withRouter(Contact);
表格如下：
import React from 'react'
import { connect } from 'react-redux'
import { Field, reduxForm, formValueSelector } from 'redux-form'
import { FormattedMessage } from 'react-intl';
import {getContact} from "../../../../Actions/contactsActions";
class ContactForm extends React.Component {
render() {
const { handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit}>
<div className="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
<div className="row">
<div className="col-lg-6 col-6">
<h2>
<FormattedMessage id={ 'Company' } values={{name:"Company"}} />
</h2>
<div className="form-group row">
<label htmlFor="company-name" className="col-4 col-form-label">
<FormattedMessage id={ 'Companyname' } values={{name:"Company name"}} />
</label>
<div className="col-8">
<Field component="input" className="form-control" name="company-name" placeholder="Company name" />
</div>
</div>
<div className="form-group row">
<label htmlFor="other-name" className="col-4 col-form-label">
<FormattedMessage id={ 'Othername' } values={{name:"Other name"}} />
</label>
<div className="col-8">
<Field component="input" className="form-control" name="other-name" placeholder="In case of sister company/group"/>
</div>
</div>
</div>
<div className="col-lg-6 col-6">
<h2>
<FormattedMessage id={ 'Person ' } values={{name:"Person"}} />
</h2>
<div className="form-group row">
<label htmlFor="person-language" className="col-4 col-form-label">
<FormattedMessage id={ 'Language' } values={{name:"Language"}} />
</label>
<div className="col-8">
<Field component="select" className="form-control" name="person-language" />
</div>
</div>
<div className="form-group row">
<label htmlFor="person-gender" className="col-4 col-form-label">
<FormattedMessage id={ 'Gender' } values={{name:"Gender"}} />
</label>
<div className="col-8">
<Field component="select" className="form-control" name="person-gender">
</Field>
</div>
</div>
<div className="form-group row">
<label htmlFor="person-salutation" className="col-4 col-form-label">
<FormattedMessage id={ 'Salutation' } values={{name:"Salutation"}} />
</label>
<div className="col-8">
<Field component="select" className="form-control" name="person-salutation" />
</div>
</div>
<div className="form-group row">
<label htmlFor="person-title" className="col-4 col-form-label">
<FormattedMessage id={ 'Title' } values={{name:"Title"}} />
</label>
<div className="col-8">
<Field component="input" className="form-control" name="person-title" placeholder="Prof. Dr. Dr."/>
</div>
</div>
<div className="form-group row">
<label htmlFor="first-name" className="col-4 col-form-label">
<FormattedMessage id={ 'First-name' } values={{name:"First name"}} />
</label>
<div className="col-8">
<Field component="input" className="form-control" name="first-name" placeholder="First name"/>
</div>
</div>
<div className="form-group row">
<label htmlFor="further-names" className="col-4 col-form-label">
<FormattedMessage id={ 'Further-names' } values={{name:"Further names"}} />
</label>
<div className="col-8">
<Field component="input" className="form-control" name="further-names" placeholder="Further names"/>
</div>
</div>
<div className="form-group row">
<label htmlFor="last-name" className="col-4 col-form-label">
<FormattedMessage id={ 'Last-name' } values={{name:"Last name"}} />
</label>
<div className="col-8">
<Field component="input" className="form-control" name="last-name" placeholder="Last name"/>
</div>
</div>
<div className="form-group row">
<label htmlFor="job-title" className="col-4 col-form-label">
<FormattedMessage id={ 'Job-title' } values={{name:"Job title"}} />
</label>
<div className="col-8">
<Field component="input" className="form-control" name="job-title" placeholder="Last name"/>
</div>
</div>
</div>
</div>
</div>
</form>
)
}
}
const validate = (values) => {
const errors = {};
if(!values.Companyname) {
errors.Companyname = "Enter a Companyname";
}
return errors;
};
ContactForm = reduxForm({
validate,
form: 'contact',
enableReinitialize : true
})(ContactForm);
ContactForm = connect(
state => ({
initialValues: state.contacts.contacts
}),
{ load: getContact }
)(ContactForm);
export default ContactForm;