分享我所遇到的React Antd3之Form 坑(一)

前言

大家好 ，我是行事 ，向上的路并不拥挤 ，只是大多数选择了安逸 ！！！

背景

本人最近在做公司的 Bug 清理工 ，就在前几天 ，测试人员提了个耐人寻味的 Bug ：

• 测试 ：系统中提交的报告有一些失败了 。
• 后端 ：查到了这条数据 ，说 cause 这个字段为 null ，前端去看看 。
• 前端 ：压力就来到了我这边 ，因为这个字段是必填项 ，required: true 失效了！！！
• 我不愧为 “猜想模拟大师” ，经我过的层层测试 ，终于发现问题是 ：用户填写的是空格 。
• 内心想法 ：就这 ，就这点难度 ，直接在 rules 中加一个 whitespace:true ，校验一下就行了呗 ！ 没想到另有乾坤

举个栗子🌰

版本

node : 12.13.1 react : ^15.3.2 Antd : ^3.26.16

一 、 当输入框为 Input 这个标签 ， whitespace:true 这个属性是好使的 😆

<Form layout="vertical"{...formItemLayout} onSubmit={this.handleSubmit}>
      <FormItem label="Input">
        {getFieldDecorator("cause", {
          initialValue: "",
          rules: [  
                  { required: true, message: "此内容不能为空" },  
                  {whitespace:true,message:"内容不能为空格"}  
                  ]
        })(<Input />)}
      </FormItem>
      <FormItem >
        <Button type="primary" htmlType="submit">
          Log in
        </Button>
      </FormItem>
</Form>

二 、 当输入框为 Select 这个标签 ，whitespace:true 这个属性就失效了 😔

<Form layout="vertical"{...formItemLayout} onSubmit={this.handleSubmit}>
      <FormItem label="Select">
        {getFieldDecorator("opr", {
          initialValue: "",
          rules: [  
                  { required: true, message: "此内容不能为空" },  
                  {whitespace:true,message:"内容不能为空格"}
                  ]
        })(<Select
          mode="combobox"
          labelInValue
          placeholder="请选择"
        >
          {
            this.state.causeList.map((item) => (
              <Option key={item.id}>{item.name}</Option>
            ))
          }
        </Select>)
        }
      </FormItem>
      <FormItem >
        <Button type="primary" htmlType="submit">
          Log in
        </Button>
      </FormItem>
  </Form>

---

这是什么原因呢 ？

原来是 Select 中的 labelInValue 属性 和 rules 的 whitespace属性 。当这两个属性同时使用时，如果 labelInValue 的值为 true，那么 whitespace 属性会自动失效，但如果 labelInValue 为 false，那么 whitespace 属性仍然会生效。

默认情况下，当我们从 `Select` 或 `TreeSelect` 中选择一个选项时，`onChange` 事件回调函数会返回一个  
包含选中项 `value` 值的数组。而当开启 `labelInValue` 特性时，返回的数据格式则是一个包含选中项  
`value` 和 `label` 值的对象。例如：
// labelInValue 关闭时   
["value1", "value2", "value3"]   
// labelInValue开启时   
[   
 { value: "value1", label: "label1" },   
 { value: "value2", label: "label2" },  
 { value: "value3", label: "label3" }   
]

考虑 ：如果把 Select 中的 labelInValue 属性关闭 ，这就涉及到了代码逻辑问题 ，我是绝对不可能再看一遍逻辑 ，然后进行更改 。到时候还需要测试重新测功能节点 ，劳民伤财呐 ~ 😮‍💨

所以最稳妥的解决方法是替代 rules 的 whitespace属性。

• 在 Ant Design 的 Form.Item 表单项中设置 validator 可以帮助我们自定义验证规则 ，验证规则是一个函数，接受三个参数：rule 和 value和callback 。
• rule 参数表示验证规则本身 。
• value 参数表示当前表单项的值 。
• callback 参数是用于在异步校验结束后进行回调的函数 。
• 当设置了 validator 函数以后 ，校验过程就会变成异步的 ，我们可以使用 callback 参数来处理异步操作结束后需要执行的后续操作 ，例如显示提示信息 、修改表单项状态等 ...

最终代码

<Form layout="vertical"{...formItemLayout} onSubmit={this.handleSubmit}>
          <FormItem label="Select">
            {getFieldDecorator("opr", {
              initialValue: "",
              rules: [
                { required: true, message: " " },
                {
                  validator: (rule, value, callback) => {
                    try {
                      if (value.label && value.label.trim() == "") {
                        callback("内容不能为空格");
                      } else if (!value.label) {
                        callback("此内容不能为空");
                      }
                      callback();
                    } catch (err) {
                      callback(err);
                    }
                  }
                }
              ]
            })(<Select
              mode="combobox"
              labelInValue
              placeholder="请选择"
            >
              {
                this.state.causeList.map((item, index) => (
                  <Option key={item.id}>{item.name}</Option>
                ))
              }
            </Select>)
            }
          </FormItem>
          <FormItem >
            <Button type="primary" htmlType="submit">
              Log in
            </Button>
          </FormItem>
        </Form>

结语

我是行事 ，一个热衷于前端开发的菜鸟程序员 ， 任何伟大的成就都是从一个小小的信念开始的，只要你坚持下去，就会取得成功。