antd 不用form onsubmit 如何完成必填项的校验

antd 不用form onsubmit 如何完成必填项的校验

 

需求： 需要对一个给用户打分文本表单，增加非空校验。正常情况下是（官方文档推荐方法），创建一个form 表单。 然后通过onsubmit进行提交。  但是我的是一个table来组成的表单。并且行数是动态的。  类似如下图：

<input/>	<input/>
<input/>	<input/>
：	：

 所以：创建<form>表单来进行，数据非空校验明显不太现实：

然后求助百度。。。。

   有一篇：https://segmentfault.com/q/1010000012884210 感觉靠谱：就尝试了一下。发现能实现我的需求：

  code:

   

function a (e){
    e.preventDefault();//***
    this.props.form.validateFields((err) => {//***
          if (err) {
             // 校验不通过  
             return;
          }else{
            // TODO 校验通过     
          }
 }

这种方式的好处是，只要你申明了

<FormItem>
                {getFieldDecorator(`thinkDoMark${row.id}`, {
                  initialValue :text,
                  rules: [{
                    required: true, message: '请输入分数!',
                  }],
                  onChange: (e) => self.changeScore(e, `thinkDoMark-${row.id}`)
                })(
                  <InputNumber min={0} max={3} step={0.1} precision={1} placeholder="0-3分"  />
                )}
              </FormItem>

 

 

可以不用创建form 表单就可以 直接对rules 规则进行校验。