antd中表单自定义验证踩坑

组件库：antd
官网：https://ant.design/docs/react/introduce-cn

我在做表单修改的时候，遇到了一个坑。其中有两个下拉框，选择第一个下拉框的值后才能有第二个下拉框的值。本来这个用antd中的自定义验证就能解决，可是默认值initialValue总是有一个加载不上去。踩坑情景如下：

第一个单选下拉框选择类型：用户/小组，第二个是 [多选下拉框] ，可以选择多个具体的用户或小组。
单选下拉框代码如下：

<Form.Item>
	{getFieldDecorator('type', {
    	initialValue: this.state.detail['type'],
    	rules: [
    		{ required: true, message: '请选择类型!' },
    		{ validator: this.typeValidate.bind(this) }
    	],
    	})(
    	<Select>
    		<Option value="1">小组</Option>
    		<Option value="0">成员</Option>
    	</Select>,
	)}
</Form.Item>       

多选下拉框的代码如下：

{this.state.isGroup?
<Form.Item>
	{getFieldDecorator('group', {
    	initialValue: this.state.detail['group'],
    	rules: [
    		{ required: true, message: '请选择小组!' }
    	],
    	})(
    	<Select mode="multiple">
        {
            this.state.groupList.map((val, ind) => {
                return <Option value={val.name} key={val.id}>{val.name}</Option>
            })
        }
    	</Select>
	)}
</Form.Item>   :
<Form.Item>
	{getFieldDecorator('user', {
    	initialValue: this.state.detail['user'],
    	rules: [
    		{ required: true, message: '请选择成员!' }
    	],
    	})(
    	<Select mode="multiple">
        {
            this.state.userList.map((val, ind) => {
                return <Option value={val.name} key={val.id}>{val.name}</Option>
            })
        }
    	</Select>
	)}
</Form.Item>
 

注意这里我用了一个三目表达式和变量isGroup（判断是小组还是成员）来控制渲染哪个组件，是因为刚开始的时候小组选择是别的组件，小组和用户的表单key值也不一样，只不过后面需求变更所以都改成了多选下拉框，而我也没有再精简，正是因为如此我才踩了这个坑，没想到问题就出在isGroup这个变量。

在业务中，重新选择小组或成员，小组列表或用户列表的值都要重新请求，所以在第一个下拉框中加入的自定义验证的方法typeValidate，代码如下：

typeValidate (rule,value,callback) {
    // 小组
    if(value === "1"){
        axios.post(url).then((res) => {
            let groupList = res['data'].data;
            this.setState({
                isGroup: true,
                groupList,
            })
            callback();
        });
    }
    // 成员
    if(value === "0"){
        axios.post(url).then((res) => {
            let userList = res['data'].data;
            this.setState({
                isGroup: false,
                userList,
            })
            callback();
        });
    }
}

注意isGroup的初始值是true，所以每次点修改的时候，我发现小组永远加载不了默认值，而成员可以，当初始值换成false的时候，反过来小组可以成员不可以。我猜测应该是渲染的问题，如果isGroup的值没有变化，则不会渲染上去。于是我对初始值进行了取反，如果修改时初始是小组，则isGroup=false，反之亦然，这样一来就可以解决只加载一个默认值的情况了。

这里我再说一下另一个坑，自定义验证的时候，回调函数callback一定要有！！！！不然这个验证它会默认没通过，继而出现各种匪夷所思的bug。所以一定要记得加上。