react-whistle
A react-component to handle your upset ui state.
Install
npm install --save react-whistle
Usage
const Dialog = ; ;
You dont need to handle states about a dialog's show and hide, you just need call props.onResolve
or props.onReject
.
Dialog;
Callbacks for your Whistle Component before destroy.
Callbacks for your Whistle Component after confirm destroy.(cancel is still in thinking.)
Last
Be happy with react-whistle.
I just hating handle dialog components in every component!
React-Validation
Introduction
验证这件事,无关视觉只与数据与动作有关。数据即验证规则与提示信息,动作即触发验证。实现的方式为高阶组件HOC,传递一个prop(默认为validation,可修正)于相关组件。
Usage
// ... { superprops; thisstate = name: '' ; thishandleChange = thishandleChange; } { const value = etargetvalue; thispropsvalidation; return value; } { const validation: field = thisprops; return <form> <input type="text" onChange=thishandleChange value=thisstatename /> fieldname ? <span>fieldname</span> : null </form> ; } FormContainer
同步验证
Simple
ruleMap = name: typeof name === 'string' && namelength msg: '姓名不能为空' ;
Advance
ruleMap = name: typeof name === 'string' && namelength '姓名不能为空' ;
联动验证
异步验证
联合验证
Glossary
ruleMap
ruleMap:
validator
msg
validate
field
validateFields
Design
Rule
Object
validator msg