キーストロークの非同期バリデーション（ボケではない）

Question

還元型asyncValidationは素晴らしいですが、ぼかしでのみ機能します。キーを押している間に起こるようにすることは可能ですか？したがって、それは300msごとに実行され、最終的な値になりますか？

Answer 1

可能ですか？短い答えは「はい」です。

トリッキーですか？さて、あなたが言及したように、redux-formオプションのasyncValidationは、onBlurの場合にのみ機能し、代わりにonChangeを使用したいと思っています。

あなたがこれを行うことができますので、あなたは、redux-formにこの機能をフォークして追加することができます。

@reduxForm({ 
    form: 'login', 
    asyncValidate: validator, 
    //asyncBlurFields: ['username','password'], 
    asyncChangeFields: ['username','password'], /* add this new option */ 
}) 

deboucingの部分については、あなたが、何らかの形ではなく、検証関数自体よりもonChangeハンドラをデバウンスしたいと思います別のオプションが表示されます...

redux-formは、それを一緒にハックするのに十分かもしれない内部アクションクリエイターをエクスポートします。特にフィールドレベルの非同期エラーをフォームに直接渡すことができるアクション作成者はstopAsyncValidationです。 FieldためonChange小道具、として、あなたが実際に右の部分を持っているペアは、それは次のように行わ取得します

さらに

import React from 'react' 
import { Field, reduxForm, stopAsyncValidation } from 'redux-form' 
import _debounce from 'lodash.debounce' 

import renderField from './renderField' 

@reduxForm({form: 'debouncedOnChangeValidation'}) 
class DebouncedOnChangeValidationForm extends React.Component { 

    customValidate =() => { 
    const { form, dispatch } = this.props 
    dispatch(stopAsyncValidation(form, { username: "thats wrong..." })) /* pass in async error directly! */ 
    } 

    debounceValidate = _debounce(this.customValidate, 1000) /* decorate with debounce! */ 

    render() { 
    const { handleSubmit, pristine, reset, submitting} = this.props 
    return (
     <form onSubmit={handleSubmit}> 
     <Field name="username" type="text" 
      component={renderField} label="Username" 
      onChange={this.debounceValidate} /* bind validation to onChange! */ 
     /> 
     <div> 
      <button type="submit" disabled={submitting}>Submit</button> 
      <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button> 
     </div> 
     </form> 
    ) 
    } 
} 

、検証を実行するためのフォームの値にアクセスするには、あなたが必要とするだろうgetFormValuesセレクタを使用します。

もちろん、これは組み込みのソリューションほど堅牢ではありませんが、いくつかのユースケースでは十分に機能するかもしれません。