Reactjs Redux表单：从带有联锁组件的自定义表单获取信息

我使用的redux表单来自：我尝试了简单的联系人表单示例，您可以在这里看到：

import React, {Component} from 'react';
import {reduxForm} from 'redux-form';
import TitleBlock from './TitleBlock'

class ContactForm extends Component {
    render() {
        const {fields: {firstName, lastName, email}, handleSubmit} = this.props;
        return (
            <form onSubmit={handleSubmit}>
                <div>
                    <label>First Name</label>
                    <input type="text" placeholder="First Name" {...firstName}/>
                </div>
                <div>
                    <label>Last Name</label>
                    <input type="text" placeholder="Last Name" {...lastName}/>
                </div>
                <div>
                    <label>Email</label>
                    <input type="email" placeholder="Email" {...email}/>
                </div>
                <TitleBlock />
                <button type="submit">Submit</button>
            </form>
        );
    }
}

ContactForm = reduxForm({ // <----- THIS IS THE IMPORTANT PART!
    form: 'contact',                           // a unique name for this form
    fields: ['firstName', 'lastName', 'email'] // all the fields in your form
})(ContactForm);

export default ContactForm;

import React，{Component}来自'React'；
从'redux form'导入{reduxForm}；
从“./TitleBlock”导入标题栏
类ContactForm扩展组件{
render（）{
const{fields:{firstName，lastName，email}，handleSubmit}=this.props；
返回(
名字
姓
电子邮件
提交
);
}
}
ContactForm=reduxForm（{//您可以让您的
ContactForm
组件将
字段
道具传递到
标题栏
中，而不是将
标题栏
连接到
redux form
，如下所示：

class ContactForm extends React.Component {
    ...
    render() {
        return (
            <div>
                <TitleBlock fields={this.props.fields} />
                ...
            </div>
        );
    }
}

export default reduxForm({...})(ContactForm)

class ContactForm extends React.Component {
    ...
    render() {
        return (
            <div>
                <TitleBlock fields={this.props.fields} />
                ...
            </div>
        );
    }
}

export default reduxForm({...})(ContactForm)

export default class TitleBlock extends Component {
    static propTypes = {
        fields: PropTypes.object.isRequired,
    };

    render() {
        const { fields: { title, description } } = this.props;
        return (
            <div>
                <div>
                    <label>Title</label>
                    <div>
                        <input type="text" placeholder="Title" {...title}/>
                    </div>
                </div>
                <div>
                    <label>Description</label>
                    <div>
                        <input type="text" placeholder="Description" {...description}/>
                    </div>
                </div>
            </div>
        );
    }
}