redux-form笔记

前言

这是我在学习redux的文档记得笔记，没有教程意义。

简单的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

//simpleform.jsx
class SimpleForm extends Component {
    render(){
        return(
            <form onSubmit={this.props.handleSubmit}>
                <Field component="input" name="m"/>
                <button type="submit">click</button>
            </form>
        )
    }
}
export default reduxForm({
    form:'simpleForm'
})(SimpleForm);

//index.jsx
import SimpleForm form 'simpleform.jsx';
import {reducer as reduxFormReducer} from 'redux-form';
import {combineReducers,createStore} from 'redux';
import {Provider} from 'react-redux';

var reducer=combineReducers({
    form:reduxFormReducer
});

var store = createStore(reducer);

class Index extends Component {
    render(){
        return(
            <Provider store={store}>
                <SimpleForm onSubmit={(value)=>{console.log(value)}}/>
            </Provider>
        )
    }
}

• 主要方法在reduxForm 里，其会注入很多方法，包括handleSubmit。

renderField Factory

可以使用一个函数方便的生成div+label+input

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

class renderField extends Component {
	render(){
		var {input, label, type, meta}=this.props;
		var {touched,error,warning}=meta;
		return (
			<div>
				<label>{label}</label>
				<div>
					<input {...input} type={type}/>
					{touched&&((error && <span>{ error }</span>) || (warning && <span>{ warning }</span>))}
				</div>
			</div>
		)
	}
}

<Field component={renderField} type="text" label="username"/>

这里可以看到 input props 会包含在Field 设置的name value 等props。
meta则是reduxForm注入的。

验证

• 验证规则默认是blur时候触发
• 可以写在reduxForm()方法中

1
2
3
4
5
6
7
8
9
10
11
12

const validate=(value)=>{
    const errors={}
    if(value.xxx){
        errors.xxx="这里写上验证失败返回字段"
    }
    return errors;
}
reduxForm({
    form:'12ty',
    validate,
    warn   //warn与valiate相同
})

• 也可以直接写在“行内”

1
2
3
4
5
6
7
8
9
10
11
12

const needEnglish=(value)=>{
    if(/[a-z]{1,}/.test(value)){
        return null;
    }else{
        return "need English";
    }
}
const required=(value)=>{
    return value?null:"Required";
}
<Field component="input" validate={[required,needEnglish]} warn={}/>
//warn同理

• 写在submit中，在onSubmit中判断

异步验证

在 reduxForm({}) 声明 asyncValidate 函数,以及声明asyncBlurFields为要在blur
时候触发异步验证的field

1
2
3
4
5
6
7
8
9
10
11
12

const sleep=(ms)=>new Promise((reslove)=>{
	setTimeout(reslove,ms)
});

const asyncValidate=(value)=>{
	return sleep(1000).then(()=>{
		if(value.username=="qwerty"){
			throw {username:"can't ~~ qwerty"};
		}
	})
}

** 这里asyncValidate函数返回的必须是一个 Promise对象

初始化表单

reduxForm 会给 form 注入一个 initialvalues props，可以用connect对应到redux中的state
来实现初始化数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function mapStateToProps(state){
	var state=state.initialForm;
	return {
		initialValues:state
	}
}

function mapActionToProps(dispatch){
	return {
		load:function(data){
			dispatch(loadAction(data))
		}
	}
}

export default connect(mapStateToProps,mapActionToProps)(
	reduxForm({
		form:'initialForm',
		validate,
		warn
	})(syncValidForm)
)

上面代码中 loadAction是一个action

Remote Submit 提交按钮独立出来

1
2
3

import {submit} form 'redux-form';
//formname为reduxForm方法里传入的form名称
<button onClick={submit('formname')}>submit</button>

props

• submitting
  • 是够正在提交阶段（submit验证）

reduxForm

• asyncBlurFields
• asyncValidate
• destoryOnUnmount
• enableReinitialize
  • boolean 默认值的 false 当为true时候，每次initialValues props变化时候，form都会重新初始化，但是不能初始化 keepDirtyOnreinitialize设置的项
• forceUnregisterOnUnmount
  *
• getFormState
  *
• keppDirtyOnReinitialize
  • 与enabeReinitialize对应
• initialValues
  • 初始值，是个对象，可以用react-redux和store中state对应起来
• onSubmit
  • 当不存在handleSubmit时候替代用
• onSubmitFail
  • 当submission失败时候触发
• onSubmitSuccess
• propNamespace
• pure
  • 不懂
• shouldValidate
  • 控制是否进行同步验证,会传入一个参数，有以下属性
    • values nextProps props initialRender
    • 需要返回true或者false控制是否进行验证
• shouldAsyncValidate
  • 控制是否进行一步验证，传入的参数不同
• touchOnBlur
  • boolean[true] 设置 fields touched 如果 没有blur事件
• touchOnChange
  • 同上 default为false
• persistentSubmitErrors
  • boolean[false] 当change事件不存在时候不会移除submit errors
• validate
• warn

实例API

是reduxForm指传入到组件中的props

dirty:boolean

当前值不和初始值（initialValues）相同时候为true

invalid:boolean

存在validation errors 即 true

pristine

和dirty对应

registeredFields:array

一个数组储存着所有field的name和type信息的

reset:function

重置表单到 initialValues

submit:promise

valid:boolean

和 invalid对应

values

当前所有的field values

wrappedInstance:ReactElement