CheckboxGroup onChange 调用validateFields 的问题

[janjon]

Environment(required)

• antd version: 1.11.5
• OS and its version: macOs 10.12.2
• Browser and its version: chrome 55.0.2883.87

What did you do? Please provide steps to re-produce your problem.

在Form 组件 中使用 CheckboxGroup。

频道onChange事件

channelChange = (values) => {
    if(values.length === 0) {
      return;
    }
    const { validateFields } = this.props.form;
    validateFields(['mobilePhoneNumber'], {force: true});
}

手机remote验证

existUser = (rule, value, callback) => {
    const { getFieldValue } = this.props.form;
    const channelIds = getFieldValue('channelGuid');  
 // 如果 channelChange 触发validateFields(['mobilePhoneNumber'], {force: true});   这里获得的 channelIds 始终是  undefined, 去掉则为数组
    if (!value || (!channelIds || channelIds.length === 0)) {
      callback();
    } else {
      const {checkUserChannelExist} = this.props;
      checkUserChannelExist(value, channelIds).then(() => {
        const {code} = this.props.checkUserChannelForm.result;
        if(code === resultCode.EXIST){
          callback([new Error('该用户已分配到指定的频道!')]);
        } else {
          callback();
        }
      });
    }
  }

频道选项

<CheckboxGroup {...getFieldProps('channelGuid', {
                  rules: [{
                    required: true, type: 'array', message: '最少选择一个频道' },
                  ],
                  onChange: this.channelChange,
                })} options={channelOptions} />

手机号码

<Input type='text' {...getFieldProps('mobilePhoneNumber', {
                validate: [{
                  rules: [
                    { required: true, message: '请输入手机号' },
                  ],
                }, {
                  rules: [
                    { pattern: /^1\d{10}$/, message: '请输入正确的手机号' },
                  ],
                  trigger: ['onBlur', 'onChange'],
                }, {
                  rules: [
                    {validator: this.existUser},
                  ],
                  trigger: ['onBlur', 'onChange'],
                }],
              })} autoComplete='off' />

What do you expected?

希望能 在 existUser 始终获得 channelGuid 的值

What happen?

channelChange 函数触发 validateFields(['mobilePhoneNumber'], {force: true});
导致不能正常获取值

Re-producible online demo

code pen 打不开了所以上不了 demo

[benjycui]

试下翻墙，这样我们也判断不了问题。

[afc163]

和 #4421 有点类似。

[benjycui]

antd version: 1.11.5

这个版本还没有 nestedField 的功能，所以原因应该不一样。

还是需要在线 demo

Please provide a re-producible demo: http://codepen.io/benjycui/pen/KgPZrE?editors=001

[benjycui]

ping @janjon

[janjon]

@benjycui 这个项目 提示 "You are using a whole package of antd,
please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size."

[janjon]

@benjycui http://codepen.io/benjycui/pen/KgPZrE?editors=0011 demo 已经有了 ,新版本也会有这个问题

[benjycui]

@janjon 你需要 fork and save，才能把 demo 保存起来。

[janjon]

@benjycui http://codepen.io/janjon/pen/MJPNGL?editors=0011

[benjycui]

因为你在 channelChange 里面触发 existUser 时，Form 的 state 还没更新，所以你拿到的是之前的值。

[janjon]

@benjycui 那也就是说这样用是不行的

[benjycui]

是的。

看下密码校验的例子吧 https://ant.design/components/form/#components-form-demo-register

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.