2016-11-03 22 views
2

私はredux-form 6.1.1を使用している反応ネイティブ(Android)で作業しています。Reduxフォーム6.1.1 - 反応ネイティブでぼかしの検証が機能しない

入力フィールドからフォーカス(ぼかし)を削除するとredux-formは検証を実行しませんが、送信確認が意図したとおりに機能しています。

ここに案内してください。以下は私のコードです。このテキストフィールド成分の

テキストフィールド成分

<TextInput 
    keyboardType={ textType ? textType : 'default' } 
    onChangeText={ (val) => onChange(val) } 
    value={ value } 
    underlineColorAndroid="transparent" 
    style={ styleInput } 
    {...this.props} 
/> 

{/* Error message */} 
<View> 
    { 
    touched && error ? 
    <Text>{error}</Text> 
    : null 
    } 
</View> 

実装

<Field component={TextField} name="phoneNumber" placeholder="Mobile Number" styleInput={styles.inputs} styleInputWrap={styles.inputView} /> 

以下検証関数として

function validate(values) { 
    const err = {}; 

    // common function for phone number validation 
    validatePhoneNumber(err, 'phoneNumber', values.phoneNumber); 

    return err; 
} 

:私は観察から& &エラー状態エラーが必要なエラーメッセージが含まれている触れたが、触れたことも、別の入力フィールドにスイッチ/フォーカスの後に偽のまま。送信ボタンをタッチするとすぐに、touchedフラグがtrueに設定されます。

+0

反応domで同じ問題があります。あなたのぼかし回避策は私のためには機能しませんでしたが –

+0

コードスニペットを共有できる場合に役立ちます。 –

答えて

1

私はこれのための回避策を見つけましたが、それでもより良い方法があれば更新してください。

以下は私の更新されたコードです(ぼかしイベントが動作しています)。

更新テキストフィールドコンポーネント

const { 
    input: { value, onChange, onBlur } 
} = this.props; 
... 
... 
<TextInput 
    keyboardType={ textType ? textType : 'default' } 
    onChangeText={ val => onChange(val) } 
    onBlur={ val => onBlur(val) } {/* <--- added onBlur function */} 
    value={ value } 
    underlineColorAndroid="transparent" 
    style={ styleInput } 
    {...this.props} 
/> 

{/* Error message */} 
<View> 
    { 
    touched && error ? 
    <Text>{error}</Text> 
    : null 
    } 
</View> 

私はちょうど(反応し、ネイティブで提供)のTextInputフィールドのonBlurイベント関数にReduxの形式のフィールドが提供するonBlurイベント小道具/機能を渡され、すべてのものが正常に動作しています。

関連する問題