カスタムコンポーネントクラスからredux-formに値を渡す方法は？

私はついにそれを理解しました。これに出くわした他の人のために、私が知る必要があることはここにあります。カスタムコンポーネントを使用するには、

• onChange小道具を使用して、フィールドの新しい値を設定します。これを行うには、コンポーネントの値を変更して新しい値を渡す必要があるときに、onChange関数を呼び出しthis.props.input.onChange(your-components-new-value-here)ます。
• この新しい値は、valuepropに保存されますthis.props.input.value。したがって、コンポーネントのレンダリング関数でコンポーネントの現在の値を渡す/表示する必要がある場合はvalue常に、propを使用してください。これはvalue小道具である必要があり、onChange関数に渡したものなどの別の変数であってはなりません。これが行うことは、あなたのredux-formの状態に表示されるものの制御を与えることです。value小道具はに結ばれています。なぜこれが便利なのですか？たとえば、ユーザーが完了したらフォームのレビューページに移動し、ユーザーがさらに変更を加えたい場合はフォームに戻ることができます。redux-formは、ユーザーがフォームに再度入力することなく、表示されているすべてのものを再入力する方法をどのように知るのでしょうか？表示は状態に依存するため、ユーザー入力ではありません。このすべてを理解するのに少し時間がかかりました!!

私の例ではreact-select、一方が他方に依存している2つのコンポーネントを使用していたため、フィールドコンポーネントを使用する必要があり、コンポーネントに1つだけでなく2つのフィールドを含めることができました。これを実装すると、両方のフィールドの値はvalueそれぞれの小道具を介して常にアクセスできるため、コンポーネント内に個別の状態を設定する必要がないことも明らかになりました。だから、はい、結局ステートレス関数を使用できたはずです！

コンポーネントを次のように呼び出します。

<Fields names={["site", "projects"]} component={SiteProjectSelect} />

私の最後の作業コンポーネント：

class SiteProjectSelect extends Component {
    handleSiteSelection = selectedSite => {
        this.props.site.input.onChange(selectedSite);
        this.props.projects.input.onChange(null);
    };

    handleProjectSelection = selectedProjects => {
        this.props.projects.input.onChange(selectedProjects);
    };

    renderSite = () => {
        const {
            input: { value },
            meta: { error, touched }
        } = this.props.site;

        return (
            <div>
                <label>Site</label>
                <div style={{ marginBottom: '20px' }}>
                    <Select
                        name="site"
                        value={value}
                        onChange={this.handleSiteSelection}
                        options={siteOptions}
                        isSearchable
                    />
                </div>
                <div className="red-text" style={{ marginBottom: '20px' }}>
                    {touched && error}
                </div>
            </div>
        );
    };

    renderProjects = () => {
        var {
            input: { value },
            meta: { error, touched }
        } = this.props.projects;

        const selectedSite = this.props.site.input.value;

        const selectedRow = selectedSite
            ? projects.find(node => node.site === selectedSite.value)
            : '';
        const filteredProjectOptions = selectedRow
            ? selectedRow.projects.map(project => ({
                    value: project,
                    label: project
              }))
            : [];

        return (
            <div>
                <div style={{ marginBottom: '20px' }}>
                    <label>Projects</label>
                    <Select
                        name="projects"
                        value={value}
                        onChange={this.handleProjectSelection}
                        options={filteredProjectOptions}
                        isMulti
                        isSearchable
                        closeMenuOnSelect={false}
                    />
                </div>
                <div className="red-text" style={{ marginBottom: '20px' }}>
                    {touched && error}
                </div>
            </div>
        );
    };

    render() {
        return (
            <div>
                {this.renderSite()}
                {this.renderProjects()}
            </div>
        );
    }
}