Входное сообщение проверки переключения для размытия и фокусировки

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

Это можно сделать с помощью параметра ant design validateStatus .Вы можете динамически изменять статусы из заданных наборов, т. Е. «Success», «warning», «error», «validating».

validateStatus: проверять состояние компонентов формы, которые могут быть «success», 'warning', 'error', 'validating'.

Вам нужны функции, одна 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 .