在 antd Form + ReactJs 中使用 antd Tooltip [英] Using antd Tooltip within antd Form + ReactJs

问题描述

如果我输入了无效的邮件 ID，我需要使用 antd 工具提示来显示无效的电子邮件！！".如何在 ReactJS antd Form 中使用它?我现在使用的代码是:

<label style={{'width':'80px','paddingTop':'8px'}}>主邮箱:</label><表单项>{getFieldDecorator('Email', {初始值: ''，规则:[{type: 'email', message: '输入的电子邮件无效！',}],})(<Input placeholder="Main Email" style={{'width':'170px'}} onChange={(e)=>{e.preventDefault();e.stopPropagation();this.handleChange(0,e, 'Email')}}/>)}</FormItem>

如何使用 antd Tooltip 修改这个来显示消息?

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

• 仅当悬停"到文本框时才有效
• 即使我输入了正确的电子邮件，工具提示仍然存在

代码是

<label style={{'width':'80px','paddingTop':'8px'}}>CC 邮箱:</label><表单项>{getFieldDecorator('抄送', {初始值: ''，规则:[{类型:'电子邮件'},],})(<Tooltip title="输入的电子邮件无效"><Input placeholder="CC Email" style={{'width':'170px'}} onChange={(e)=>{e.preventDefault();e.stopPropagation();this.handleChange(0,e, 'Cc')}}/></工具提示>)}</FormItem>

解决方案

您可以使用 visible tooltip 的属性如下:

{getFieldDecorator("用户名", {规则: [{类型:电子邮件"，信息: (<工具提示可见={真}title="输入的电子邮件无效！"/>)}]})(<输入prefix={<Icon type="user" style={{ color: "rgba(0,0,0,.25)" }}/>}占位符=电子邮件"/>)}</FormItem>

我创建了一个工作演示.

I need to use antd Tooltip to show "Invalid Email!!",if I enter an invalid mail id. How to use it in ReactJS antd Form? The code I am using right now is:

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

How to modify this using antd Tooltip for showing the message?

I have tried another code with tooltip. But the issues are

• it is working only when "hover" to the textbox
• Eventhough I enter correct email, the Tooltip remains there

The code is

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

解决方案

You can use the visible property of tooltip as given below:

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

I have created a working demo.

这篇关于在 antd Form + ReactJs 中使用 antd Tooltip的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！