前言

这是我在学习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 valueprops
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