reactjs - 在 React JS 中关闭表单后如何保持 Tooltip 的可见性
问题描述
我正在使用工具提示在我的表单(这是一个模态)中显示验证消息。
我在表单中有一个取消按钮。当我单击取消按钮(下图中不包含取消按钮)并重定向到索引页面时,工具提示仍保留在索引页面中,如下所示:
form.js 中用于工具提示的代码
<div style={{ 'height': '46px', 'display': 'flex'}}>
<label style={{ 'color': '#f5222d', 'paddingTop': '10px', 'fontFamily': 'SimSun'}}>*</label>
<label style={{ 'width': '70px', 'paddingTop': '8px'}}>Customer Name:</label>
<FormItem>
{getFieldDecorator('Name', { initialValue: '', rules: [{ required: true, message: (
<Tooltip visible={true} placement="topRight" title="Please Input Customer Name" /> ), }], })(
<Input placeholder="Customer Name" style={{ 'width': '164px'}} onChange={(e)=>{e.preventDefault(); e.stopPropagation(); this.handleChange(0,e, 'Name')}}/> )}
</FormItem>
</div>
index.js 中取消按钮的代码
handleModelCancel = () => {
this.setState({ isModelOpen:false });
}
有没有办法解决这个问题?有谁能够帮我?
解决方案
在 handleModelCancel 函数上,您需要为工具提示编写逻辑,即您需要为 Tooltip 执行可见 false 而不是将布尔值直接传递给可见传递其值为布尔值的变量,例如:
`<Tooltip visible={this.state.isTooltipVisible}>`
在 handleModelCancel 函数中将 isTooltipVisible 值设为 false。
希望对你有帮助!
推荐阅读
- java - Java 中的 volatile 变量是否应该在第二个线程上不可见?
- events - 如何在 Azure 事件中心中仅读取一次事件
- couchdb - 链码找不到索引
- c - 将数组转换为最大堆
- javascript - 如何防止调度动作重新渲染屏幕 - redux?
- c++ - 获取 C++ 项目的内存使用情况
- java - 理解 Java 中的公平 ReentrantLock
- mysql - 如何在 NodeJS 和 MySQL 之间发送和存储不同时区的日期?
- swift - 我每次都遇到同样的错误:线程 3:信号 SIGABRT,我该怎么办?
- javascript - 需要帮助才能使此下拉菜单正常工作