Question

我正在使用来自http://redux-form.com/4.2.0的redux-form，我尝试了简单的联系表单示例，您可以在此处看到：

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, PropTypes } from 'react'
import {reduxForm} from 'redux-form';
export const fields = ['title', 'description'];

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>

        )
    }
}
export default reduxForm({
    form: 'TitleBlock',
    fields
})(TitleBlock);

我想将这个TitleBlock与我的联系表格联系起来，是否有可能在一个提交功能中管理所有信息？

Answer 1

您可以让TitleBlock组件将redux-form道具传递到ContactForm，而不是将fields连接到TitleBlock，而不是：{/ p>

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

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

您的TitleBlock组件可能如下所示：

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>
        );
    }
}

Redux-form：从带有互锁组件的自定义表单中获取信息

1 个答案: