Reduxフォームで複数入力フィールドを使用する良い方法はありますか？

Question

私のプロジェクトでは、ReactとRedux-Formのフォームを作成しています。我々は、2つの入力の値によって構成される単一の情報を持っています。しかし、各入力の値は結合され、一緒に検証されます。

最初の実装は、各コンポーネントをFieldに接続することでした。状態を正しく更新するようにしましたが、validate小道具と一緒にすべての値を検証することはできませんでした。

Fieldsコンポーネントを使用していましたが、validate支柱はありませんでした。私たちはプルリクエストを作成すると考えましたが、そのためのAPIはまだ明確ではありません。Fields小道具（例えば、parseとformat）の2つの値と動作の組み合わせを検証したいのは異なるFieldsコンポーネント内の各入力用の機能。

コンポーネントを作成してアプリケーション状態に接続するのに、Fieldを使用することは可能ですが、触った小道具や状態を更新するためのコールバックやその他のものを管理したくありませんでした。 Redux-Formのすべてが完了しているので気づいたこともあります。

実際、私は実装に終わるが、それは非常に優雅に見えなかった。実装を見て、あなたの意見を述べ、他の解決策を提案してください。この解決策が実装されていないとしても、私たちはおそらくそれについて引き出し要求を開くことができます。Redux-Formここ

は、私は2つの参照例実装

シンプルな形容器

import SimpleForm from 'app/simpleForm/components/simpleForm' 
import { reduxForm } from 'redux-form' 

export default reduxForm({ 
    form: 'simpleForm' 
})(SimpleForm) 

単純なフォーム成分

import React from 'react' 
import { Field } from 'redux-form' 
import MultiInputText from 'app/simpleForm/components/multiInputText' 

const onSubmit = values => alert(JSON.stringify(values)) 

const validateAddress = (value) => { 
    if (!value) return 'Address is empty' 
    if (!value.street) return 'Street is empty' 
    if (!value.number) return 'Number is empty' 
    return null 
} 

const SimpleForm = ({ handleSubmit }) => { 
    return (
    <form onSubmit={ handleSubmit(onSubmit) }> 
     <Field label="Home Address" name="home" component={MultiInputText} type="text" validate={validateAddress}/> 
     <Field label="Work Address" name="work" component={MultiInputText} type="text" validate={validateAddress}/> 
     <button type="submit">Submit</button> 
    </form> 
) 
} 

export default SimpleForm 

MultiInputText成分

import React from 'react' 
import { Fields, FormSection } from 'redux-form' 

const renderAddreessInputs = ({ street, number, error }) => (<div> 
    <input {...street.input} type="text" /> 
    <input {...number.input} type="text" /> 
    { street.meta.touched && number.meta.touched && error && <span className="error">{error}</span> } 
</div>) 

const MultiInputText = (props) => { 
    const { input: { name }, label, meta: { error }} = props 
    const names = [ 
    'street', 
    'number' 
    ] 

    return (<div> 
    <label htmlFor={name}>{label}</label> 
    <FormSection name={name}> 
     <Fields names={names} component={renderAddreessInputs} error={error}/> 
    </FormSection> 
    </div>) 
} 

export default MultiInputText 

Answer 1

ありますオプション：

1）レコードレベル検証を使用します。

reduxForm({ 
    form: 'addressForm', 
    validate: values => { 
    const errors = {} 
    if(!home) { 
     errors.home = 'Address is empty' 
    } 
    // etc, etc. Could reuse same code for home and work 
    return errors 
    } 
}) 

2）複素数値を扱う1つの入力を作成します。

<Field name="home" component="AddressInput"/> 

... 

const AddressInput = ({ input, meta }) => 
    <div> 
    <input 
     name={`${input.name}.street`} 
     value={(input.value && input.value.street) || ''} 
     onChange={event => input.onChange({ 
     ...input.value, 
     street: event.target.value 
     })}/> 
     ...other inputs here... 
    </div> 

総擬似コードだが、私はそれは全体のポイントを取得します願っています：単一の入力は、オブジェクト全体の構造を編集することができ。

個人的には、オプション1を選択したいと思いますが、フィールドレベルの検証よりもレコードレベルの検証が一般的です。オプション2の良い点は、単一の​​をアプリケーション全体で再利用できることです。欠点は、特定のフィールドレベルのフォーカス/ぼかし/汚れた/元の状態を取得していないことです。

希望は...？