redux-form 部分Api说明

2016-09-03  本文已影响1529人  Moon_Yue

reduxForm(config:Object)

一个装饰器,用于你的表单组件联接到Redux.可以通过一些参数来配置你的表单

Config Properties

IMPORTANT:所有的配置选项应该在“design time”(设计阶段)传递给reduxForm() 或者在运行阶段通过props传递给你的组件

Required(必需的)

form : String

这是你组件的name和key,它将加载在redux-form reducer下面

Optional(可选的)

enableReinitialize : boolean [optional]

当值为true时,表单的值会一直是initialValues的值。默认是false.

initialValues : Object<String, String> [optional]

values将在componentWillMount()初始化你的表单。这些值将与你的表单{field1:"value1",field2:"value1"}对应。

validate : (values:Object, props:Object) => errors:Object [optional]

一个同步验证函数,传入整个表单的values与props.如果你的验证需要返回{},如果验证失败,你需要返回验证的错误信息{field:<string,field2:<string>}

Props

以下所有的属性都是存在于redux-form装饰过的表单组件。其他部分props可以通过包裹组件传递

anyTouched : boolean

如果你触碰了任何fields anyTouched的值为true,否则为false

form : String

通过装饰器给表单的名字或通过属性给组件的名字(多个表单时候使用)

handleSubmit(eventOrSubmit) : Function

function,你可以这样使用<form onSubmit={handleSubmit}>or to <button onClick={handleSubmit}>.它可以验证数据,同步异步都行,如果表单有效,它将执行 this.props.onSubmit(data)data为表单的数据。
另外,你可以将你定义的onSubmit函数传递给handleSubmit它将代替属性中的onSubmit.例如<form onSubmit={handleSubmit(this.save.bind(this))}>如果你的onSubmit函数返回一个promise,submitting属性将被设置为trun直到promise变为resolve或reject.如果reject的是一个object像 new SubmissionError({field:"err"})那么submission errors将被添加到每一个field的error属性中就像异步验证错误一样。如果这个error没指定任何field,但是适用于整个表单。 you may pass that as if it were the error for a field called _error, and it will be given as the error prop.(这句有不是很明白什么意思)
handleSubmit的两种用法
1.传递一个函数来调用

<button onClick={handleSubmit(data => {
  // do something with data. validation will have been called at this point,
  // so you know the data is valid
})}>Submit</button>

2.给onSubmit属性传递一个函数

<MyDecoratedForm onSubmit={data => {
  // do something with data. validation will have been called at this point,
  // so you know the data is valid
}}/>

initialize(data:Object) : Function

初始化函数,用于初始化表单的值。dirty和pristine会由当前值与初始值对比来确定,这是一个绑定行为创造者,所以没有返回值

initialValues : Object

通过reduxForm的属性来初始值来初始化initalize表单数据

invalid : boolean

如果有验证的错误信息则为true, valid属性与之相反

pristine: boolean

如果表单数据与初始值相同则为true, dirty属性与之相反

reset() : Functionå

用初始值重设表单的数据,重置pristine。这是一个绑定行为创造者,所以没有返回值

submitting : boolean

不管你的表单是否提交,这是属性只在你的handleSubmit函数返回值是个promise时有效,它的值在此过程中为true直到你的promise返回一个resolve或reject

上一篇下一篇

猜你喜欢

热点阅读