ReactForm
思想
高阶组件
Usage 使用
WARNING: This component is still under development
To install react-form:
npm install react-validation-form --save
How to use:
;; const propTypes = value: PropTypesstring; { superprops; } { return <input type="text" value=thispropsvalue ...thisprops /> } InputpropTypes = propTypes; { return <form> <FormItem> <Input ...thispropsform /> </FormItem> <FormItem> <Input ...thispropsform /> </FormItem> <FormItem> <Input ...thispropsform /> </FormItem> <button onClick= { e; thispropsform }>提交</button> </form> } // now you can use the form.TestForm;
问题记录
问题1
对于异步验证,举个例子,加入是 onChange
触发验证,那么对于频繁修改表单,会不断地触发回调,造成显示上出现验证和验证结束UI之间的闪烁
(初步解决方案,通过观察现在的值跟之前放进去的值是否一致来决定是否触发回调)
经验证,以上方法仍然会闪动,当来回删除键入同一个字符即可。
解决方案: 目前采用记录一个 validateId 来解决,记录每一个验证的 validateId,效果良好
问题2
加入脏检查
原因:一个表单元素可能在 onChange
的时候不触发验证,然后在 onBlur
的时候触发验证,如果表单元素的值没有被改过,不应该触发验证,使用脏检查可以避免不必要的验证
问题3
onChange
与 onBlur
是检测两种错误的,onChange
检测出了一个错误,然后错误显示出来,接着触发 onBlur
,此时 onBlur
触发的错误应该和 onChange
触发的错误同时显示出来,而不是只显示 onChange
触发的错误,但是两次触发 onBlur
只应该显示最后一次发生的错误,但是,onChange
和 onBlur
可能是检测同一个错误的,这就要求程序要记录 validates 在数组中的序号,这样就能达到要求,不过目前 Validator
的设计是传入 rules 数组(会把 validates
数组进行转换变成 rules
数组),所以现在暂时是显示最后一次验证得出的错误。