如果我输入了无效的邮件 ID，我需要使用 antd Tooltip 来显​​示“无效的电子邮件！！”。如何在 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 Tooltip 修改它以显示消息？

我已经尝试了另一个带有工具提示的代码。但问题是

• 它仅在“悬停”到文本框时工作
• 即使我输入了正确的电子邮件，工具提示仍然存在

代码是

<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>