ReactWheels11-03form组件

proposal optional chaining 提案

1
2
3
4
5
6
var a = {c:[0,2]}

a.c && a.c.join(',')

// 如果有这个提案就可以这样
a?.c.join(',')

异步的表单验证

如用户名是否存在

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const rules = [
           {key: 'username',validator: {
                   name:'unique',
                   validate(username:string){
                       axios.get('/check_name',{params:{username}})
                           .then(()=>{
                               
                           },()=>{

                           })
                       // 但是结果是异步的  
                       // 此时只能用 Promise
                   }
               }
           }
       ]

Promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const usernames = ['frank','jack','tom'];
const checkUserName = (username: string,success:()=>void,fail:()=>void) =>{
    setTimeout(()=>{
        if(usernames.indexOf(username)>0){
            success()
        }else{
            fail();
        }
    },3000);
}

...


{key: 'username',validator: {
        name:'unique',
        validate(username:string){
            return new Promise((resolve,reject)=>{
                checkUserName(username, resolve, reject);
            })
        }

    }
}

Promise

1
2
3
4
5
cosnt x = ()=>{};

Promise.all(promistList).then(x,x);
// 等价于
Promise.all(promistList).finally(x);

Todo

  • 支持子字段编辑(子表单)
  • 支持更多的 type 如 图片上传 / 自定义 type
  • 支持手机端