1

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 を連絡先フォームに連動させたいのですが、それを実行して、すべての情報を 1 つの送信機能で管理することは可能ですか?

4

1 に答える 1

1

TitleBlockに接続する代わりに、コンポーネントにprop を次のように渡すredux-formことができます。ContactFormfieldsTitleBlock

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>
        );
    }
}
于 2016-03-11T22:49:36.270 に答える