关于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:'',
        })                                                                       
      }

达到重置目的。


版权声明:本文为haowieliang原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。