Redux-form嵌套到实际项目开发案例七

本案例是异步请求验证，输入框失去焦点就验证官方案例

一、为了实现异步验证，需要给reduxForm装饰器传递一个异步验证函数，该函数以表单value,dispatch为参数，返回一个promise对象，该promise对象被拒绝的时候返回错误信息对象，在已经解决的时候则返回验证信息

二、asyncValidate.js代码

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

const asyncValidate = (values/*, dispatch */) => {
    return sleep(1000) // simulate server latency
        .then(() => {
            if (['john', 'paul', 'george', 'ringo'].includes(values.username)) {
                throw {username: 'That username is taken'}
            }
        })
}

export default asyncValidate


----------


也可以直接写成
const asyncValidate = (value,/*dispatch*/) =>
    new Promise((resolve,reject)=>{
        setTimeout(()=>{
            if(['john', 'paul', 'george', 'ringo'].includes(values.username)){
                reject({username: 'That username is taken'})
            }else{
                resolve()
            }
        })
    })

三、validate.js代码

const validate = values => {
    const errors = {}
    if (!values.username) {
        errors.username = 'Required'
    }
    if (!values.password) {
        errors.password = 'Required'
    }
    return errors
}

export default validate

四、AsyncValidationForm.js代码

import React from 'react'
import {Field, reduxForm} from 'redux-form'
import validate from './validate'
import asyncValidate from './asyncValidate'

//将验证传递的传递进去(仅仅是装饰器)
const renderField = ({input, label, type, meta: {asyncValidating, touched, error}}) => (
    <div className="form-group">
        <label>{label}</label>
        <div>
            <input {...input} type={type} placeholder={label} className="form-control"/>
            {touched && error && <span>{error}</span>}
        </div>
    </div>
)

const AsyncValidationForm = (props) => {
    const {handleSubmit, pristine, reset, submitting} = props
    return (
        <form onSubmit={handleSubmit(val => console.log(val))}>
            <Field name="username" type="text" component={renderField} label="Username"/>
            <Field name="password" type="password" component={renderField} label="Password"/>
            <div>
                <button type="submit" className="btn btn-success" disabled={submitting} style={{marginRight:'20px'}}>Sign Up</button>
                <button type="button" className="btn btn-success" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
            </div>
        </form>
    )
}

export default reduxForm({
    form: 'asyncValidation', // a unique identifier for this form
    validate,
    asyncValidate,
    asyncBlurFields: ['username'] //异步验证的
})(AsyncValidationForm)