関数を返す関数は、reduxフォームフィールドレベルの検証では機能しません。

Question

It`saは奇妙な振る舞いをビットが、私の検証:)

で起こっていただきました！私は実際に私は、フィールドレベルの検証

export const confirm = (valueToConfirm, message) => (value, allValues) => { 
    if (value !== allValues[valueToConfirm]) { 
    return message; 
    } 

    return undefined; 
}; 

そして、そのような使用を持って把握することはできません

<Field 
    type="email" 
    name="confirmEmail" 
    component={TextInput} 
    validate={[required, email, confirm('email', 'Bla-bla-bla')]} 
/> 

thatsは実際には、別の検証が失敗した場合にのみ機能します。だから、ユーザーの入力がすべてのフィールドを修正した場合、単にEメールと電子メールが一致しない場合 - は検証エラーではありません！

しかし、私がバリデーションを変更した場合、関数を返す関数ではありません。それは機能します。

export const confirmEmail = (value, allValues) => { 
    if (!value || value !== allValues.email) { 
    return 'Bla-bla-bla'; 
    } 

    return undefined; 
}; 

P.S.すべてのフィールドレベル検証で同じです。たとえば、動的minLength検証です。

Answer 1

私はあなたがRedux Fieldを使用していることを知っていますが、これもVanilla Reactで簡単に達成できます。

<form> 
<input 
       type="text" 
       name="username" 
       placeholder="name" 
       value={this.state.username} 
       onChange={this.handleChange}/> 
</form> 

handleChange(e) { 
    //check for validation here to have real time feedback to user when their 
    inputs match what you're looking for. 

} 

Answer 2

妥当性検査機能が正しくないと思われます（confirm）。あなたが使用している検証機能：使用している引数を持つ

export const confirm = (valueToConfirm, message) => (value, allValues) => { 
    if (value !== allValues[valueToConfirm]) { 
    return message; 
    } 

    return undefined; 
}; 

：

confirm('email', 'Bla-bla-bla') 

は、それが常に検証をすることを意味します。 email入力の値をemailプロパティの値allValues（emailの値）に照らして検証しています。それは次のとおりです。

if (test@example.com !== test@example.com) { 
    return 'Bla bla bla'; 
} 

この条件は常に検証を通過します意味、失敗します。と評価さ

// value = test@example.com 
// allValues = {email: 'test@example.com'} 
// valueToConfirm = 'email' 
// message = 'Bla bla bla' 

if (value !== allValues[valueToConfirm]) { 
    return 'Bla bla bla'; 
} 

。