输入模糊和focusIn的验证消息切换

Question

我只想触发输入“模糊不清”的验证，而不是在上面输入。因此，我使用了validateTrigger:'onBlur'方法，它对我来说很好，就像预期的那样。用户焦点/再次单击输入后，验证消息应该消失，有解决方案吗？

<FormItem>
{getFieldDecorator('email', {
    rules: [
        {
          type: 'email', message: 'Valid E-mail required!',
        },
        { required: true, message: 'E-mail required!', whitespace:true }
    ],
    validateTrigger:'onBlur'
})(
    <Input
        placeholder="Email"
    />
)}

​

Answer 1

这可以通过使用蚂蚁设计validateStatus参数来完成。您可以动态地更改给定集合中的状态，即“成功”、“警告”、“错误”、“验证”。

validateStatus:验证表单组件的状态，可以是“成功”、“警告”、“错误”、“验证”。

您需要函数，一个onBlur和其他onFocus。FormItem可以编写为：

        <FormItem
          validateStatus={this.state.showError && userNameError ? "error" : ""}
          help={
            this.state.showError && userNameError
              ? "Valid E-mail required!"
              : ""
          }
        >
          {getFieldDecorator("userName", {
            validateTrigger: "onBlur",
            rules: [
              { type: "email", message: "Valid E-mail required!" },
              { required: true, message: "Please input your username!" }
            ]
          })(
            <Input
              placeholder="Email"
              onBlur={this.handleBlur}
              onFocus={this.handleFocus}
            />
          )}
        </FormItem>

这两种方法可以写成：

  handleBlur = e => {
    this.setState({ showError: true });
  };

  handleFocus = e => {
    this.setState({ showError: false });
  };

工作演示在codesandbox.io上。