关于getFieldDecorator校验与onChang的value设置冲突的解决

关于getFieldDecorator校验与onChang的value设置冲突的解决

我所做的是用ant design组件getFieldDecorator校验input输入框的合法性，onChang监听value用以重置按钮重置state。

<FormItem>{
                            getFieldDecorator('total',{
                                rules:[{max:5,message:'不能超过5个字符'},
                                {required:true,message:'不能为空'}],
                                initialValue:this.state.total
                            })(
                            <div><Input value={this.state.total} onChange={(event)=>this.onChange1(event)} ></Input></div>)
                        }
                            </FormItem>

一开始中规中矩添加校验后无法再重置内容，因为getFieldDecorator接管了value，所以内部的失效了，我们可以用initialValue设置初始值，用

包裹从而使onChange生效。

又发现了一种似乎更合理的解决方法

initialValue:model.total?model.total:'',

规则中加入此句也可。

其次，修改form表单时浏览器显示的和state并不是同步变化的，对form表单的读写采用get，set，所以此处重置仅需再次给表单插入一次新的一系列值：

 function reset() {
        setFieldsValue({
         total:'',
         deadline:'',
         year:'',
         quarter:'',
         month:'',
        })                                                                       
      }

达到重置目的。