美文网首页
redux-form 部分Api说明

redux-form 部分Api说明

作者: Moon_Yue | 来源:发表于2016-09-03 22:23 被阅读1529次

    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

    相关文章

      网友评论

          本文标题:redux-form 部分Api说明

          本文链接:https://www.haomeiwen.com/subject/hdclettx.html