reactjs - 在 antd Form + ReactJs 中使用 antd Tooltip
问题描述
如果我输入了无效的邮件 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>
解决方案
您可以使用visible
tooltip 的属性,如下所示:
<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>
我创建了一个工作演示。
推荐阅读
- sql - 访问 - 查询不可执行
- r - 如何在不使用 quantile/decile 函数的情况下将列切成十个桶?
- javascript - 更改图像源会导致空图像
- hyperledger-fabric - 如果链码调用既查询又更新私有数据,提案请求将返回错误。为什么?
- datadog - 如何使用 Datadog API (Python) 计算最大 CPU / Mem 使用率
- git - 如何将 svn 存储库合并到一个具有干净历史记录的 git 存储库中?
- java - Spring Data JPA - 数据库问题连接不可用,请求在 30000 毫秒后超时
- django-rest-framework - Django REST Framework (DRF):ModelSerializer 不验证序列化模型
- javascript - 尝试将要求与字符串连接一起使用时出现“TransformError:无效调用”
- c++ - 在 main() 之外访问二维数组会导致运行时分段错误?