Использование всплывающей подсказки antd в форме antd + ReactJs

Question

Мне нужно использовать всплывающую подсказку antd, чтобы отобразить «Invalid Email !!», если я введу неверный почтовый идентификатор.Как использовать его в ReactJS antd Form?Код, который я сейчас использую:

<div style={{'height': '40px','display':'flex'}}> 
                      <label style={{'width':'80px','paddingTop':'8px'}}>Main Email:</label>       
                            <FormItem >
                            {getFieldDecorator('Email', {
                        initialValue: '',
                        rules: [{
                          type: 'email', message: 'The input is not valid E-mail!',
                        }],
                      })(
                        <Input placeholder="Main Email" style={{'width':'170px'}} onChange={(e)=>{e.preventDefault(); e.stopPropagation();                                   
                            this.handleChange(0,e, 'Email')}} />
                      )}                       
                    </FormItem>   </div>

Как изменить это с помощью всплывающей подсказки antd для отображения сообщения?

Я пробовал другой код с всплывающей подсказкой.Но проблемы в том, что

• работает только при наведении курсора на текстовое поле
• Даже если я введу правильное электронное письмо, всплывающая подсказка останется там

код

<div style={{'height': '40px','display':'flex'}}>  
                    <label style={{'width':'80px','paddingTop':'8px'}}>CC Email:</label>        
                    <FormItem >
                            {getFieldDecorator('Cc', {
                        initialValue: '',
                        rules: [{
                          type: 'email'
                        },],
                      })(
                        <Tooltip title="The input is not valid Email">
                        <Input placeholder="CC Email" style={{'width':'170px'}} onChange={(e)=>{e.preventDefault(); e.stopPropagation();                                   
                            this.handleChange(0,e, 'Cc')}} />
                        </Tooltip>
                      )}                       
                    </FormItem>                     
                    </div>

Answer 1

Вы можете использовать свойство visible всплывающей подсказки, как указано ниже:

<FormItem>
  {getFieldDecorator("userName", {
    rules: [
      {
        type: "email",
        message: (
          <Tooltip
            visible={true}
            title="The input is not valid Email!"
          />
        )
      }
    ]
  })(
    <Input
      prefix={<Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />}
      placeholder="Email"
    />
  )}
</FormItem>

Я создал рабочую демонстрацию .