正文 

当前位置： 首页 > 问答 >

使用 reactstratp 库自动隐藏 Toast 消息

     2023-03-23     32

关键词：

【中文标题】使用 reactstratp 库自动隐藏 Toast 消息【英文标题】：Autohide Toast message using reactstratp library 【发布时间】：2021-03-25 07:59:47 【问题描述】：

我已经尝试了所有方法，但我的吐司仍然没有自行消失，这是组件

interface Props 
  setGlobalToast?: typeof setGlobalToast;
  toast?: ToastRequest;

/**
 * Displays toast notifications to user on any page of the site.
 */
const ToastGlobal: FunctionComponent<Props> = ( setGlobalToast, toast ) => 
  return (
    <Toast className="GlobalToast" isOpen=!!toast transition=key:"1", transitionLeaveTimeout:3000>
      <ToastHeader icon=toast && toast!.type toggle=() => setGlobalToast!(null)>
        toast && toast.heading
      </ToastHeader>
      <ToastBody>toast && toast.body</ToastBody>
    </Toast>
  );
;

【问题讨论】：

【参考方案1】：

试试这个

<Toast className="GlobalToast" show=!!toast transition=key:"1", transitionLeaveTimeout:3000 onClose=()=>setGlobalToast(!toast) delay=2000 autohide>
      <ToastHeader icon=toast && toast!.type>
        toast && toast.heading
      </ToastHeader>
      <ToastBody>toast && toast.body</ToastBody>
</Toast>

【讨论】：

非常感谢您的回复，由于 reactstrap 库我与 react bootstrap 不同，因此我仍然无法在属性中使用 isOpen，onClose 不存在，延迟或自动隐藏也不存在 /跨度> 【参考方案2】： 
function SampleToast()
    const [visible, setVisible] =  useState(true)
    const handleClick = () => 
         setVisible(true)
         setTimeOut( () => setVisible(false), 1000)
    
    return(
        <React.Fragment>
            <Button onClick = () => handleClick()> Show </Button>
            <Toast isOpen = visible transition =  in: visible, timeout: 150>
               Hello world
            </Toast>
        </React.Fragment>
    )

【讨论】：

【参考方案3】： 
useEffect(() => 
    if (toast) 
      setTimeout(() => toggle(), 3000)
    
  , [toast])

只需将切换功能替换为您的功能即可关闭吐司。

【讨论】：

git使用

一.建立版本库1.cd/e　　读取e盘下2.mkdirgitwork　　创建版本库gitwork3.cdgitwork　读取gitwork文件夹下4.gitinit　　把此目录变为git管理仓库（此时系统自动为我们创建了第一个分支）文件夹内自动生成.git半隐藏文件夹（用于记录版本更... 查看详情

让tabbar自动隐藏

...。最终我自己写了一个库，来应对这种事情的发生，然后使用起来就非常方便了。直接Push就可以了，什么都不用写。这是git 查看详情

让tabbar自动隐藏

...。最终我自己写了一个库，来应对这种事情的发生，然后使用起来就非常方便了。直接Push就可以了，什么都不用写。这是git 查看详情

使用 Phonegap Build 自动隐藏启动画面

】使用PhonegapBuild自动隐藏启动画面【英文标题】：AutohidingSplashscreenwithPhonegapBuild【发布时间】：2013-11-2614:59:41【问题描述】：使用Phonegap(3.1.0)、PhonegapBuild和Splashscreen插件，我试图防止启动屏幕自动隐藏。一旦屏幕完全加载，我... 查看详情

如何使用静态库（iOS）在应用程序中隐藏核心数据模型？

】如何使用静态库（iOS）在应用程序中隐藏核心数据模型？【英文标题】：HowtohideCoreDatamodelinappusingStaticLibrary(iOS)?【发布时间】：2010-12-1410:24:40【问题描述】：我在XCode中开发静态库。我想通过使用CoreData模型来使用CoreData。如何... 查看详情

隐藏在使用 Xcode 构建的静态库中的符号

】隐藏在使用Xcode构建的静态库中的符号【英文标题】：SymbolhidinginstaticlibrariesbuiltwithXcode【发布时间】：2011-03-1715:07:05【问题描述】：我试图弄清楚我是否可以构建一个静态库来隐藏它的所有内部对象和函数等，除了我想要导出... 查看详情

在使用 g++ 创建的共享库中隐藏实例化模板

】在使用g++创建的共享库中隐藏实例化模板【英文标题】：Hidinginstantiatedtemplatesinsharedlibrarycreatedwithg++【发布时间】：2011-02-2414:30:10【问题描述】：我有一个包含以下内容的文件：#include<map>classA;voiddoSomething()std::map<int,A>... 查看详情

使用自动布局并创建动态界面（隐藏字段时自动重新对齐）

】使用自动布局并创建动态界面（隐藏字段时自动重新对齐）【英文标题】：Usingautolayoutandcreatingdynamicinterface(realigningautomaticallywhenfieldhidden)【发布时间】：2014-07-2220:54:21【问题描述】：使用Xcode5和自动布局。考虑以下场景：我... 查看详情

如何隐藏我的 Django 应用程序中使用的 js 库

】如何隐藏我的Django应用程序中使用的js库【英文标题】：HowtohidejslibrariesusedinmyDjangoapp【发布时间】：2020-01-2700:35:48【问题描述】：我一直在研究网络安全，发现可以检测到您网站上使用的js库，并允许黑客利用该信息进行特定... 查看详情

使用 Cocoa 自动布局隐藏和显示视图

】使用Cocoa自动布局隐藏和显示视图【英文标题】：UsingCocoaautolayouttohideandshowaview【发布时间】：2013-11-2116:30:24【问题描述】：我正在尝试根据是否使用自动布局单击按钮来隐藏和显示下图中的视图#1。有人知道怎么做吗？我尝试... 查看详情

如何使用 ProGuard（或任何其他方式）隐藏库 Jar 中的公共类？

】如何使用ProGuard（或任何其他方式）隐藏库Jar中的公共类？【英文标题】：HowtohidepublicclassesinlibraryJarusingProGuard(oranyotherway)?【发布时间】：2013-07-1313:53:55【问题描述】：我想构建一个库，但我不希望将某些类暴露给开发人员，... 查看详情

使用溢出时无法隐藏滚动条：自动

】使用溢出时无法隐藏滚动条：自动【英文标题】：can\'thidescrollbarwhenusingoverflow:auto【发布时间】：2013-12-2504:34:26【问题描述】：我有这个CSS：.divbackground-color:red;position:relative;height:414px;overflow:auto;width:902px;margin:0pxauto;我尝试使用... 查看详情

如何使用新的设计库 API 正确隐藏和显示操作栏？

】如何使用新的设计库API正确隐藏和显示操作栏？【英文标题】：Howtoproperlyhide&showtheactionbarusingthenewdesignlibraryAPI?【发布时间】：2015-11-0612:45:59【问题描述】：背景假设我在活动中有这些元素：actionbar（实际上是一个工具栏）... 查看详情

如何使用 MVVM 自动隐藏 WPF 中的 DataGrid 列？ [复制]

】如何使用MVVM自动隐藏WPF中的DataGrid列？[复制]【英文标题】：HowtohideDataGridcolumninWPFautomaticallyusingMVVM?[duplicate]【发布时间】：2014-09-0620:34:21【问题描述】：使用MVVM（无代码隐藏），我想在选择时隐藏我的DataGrid列，我有以下代... 查看详情

使用自动布局隐藏视图并重新定位其他视图

】使用自动布局隐藏视图并重新定位其他视图【英文标题】：HideViewandrepositionotherViewwithAutolayouts【发布时间】：2014-04-0117:43:27【问题描述】：各位，我有一个包含多个信息的配置文件视图。其中一些不必设置，例如传记。因此，... 查看详情

使用来自 javascript 的返回值自动填充隐藏的表单字段

】使用来自javascript的返回值自动填充隐藏的表单字段【英文标题】：Autopopulatehiddenformfieldwithreturnvaluefromjavascript【发布时间】：2013-04-3017:46:26【问题描述】：我需要使用从java脚本函数返回的值填充隐藏的表单字段，但我不确定... 查看详情

如何使用隐藏字段选择带有 ID/值对的 jquery 自动完成

】如何使用隐藏字段选择带有ID/值对的jquery自动完成【英文标题】：HowtoselectjqueryautocompletewithID/valuepairsusingahiddenfield【发布时间】：2018-05-0323:26:35【问题描述】：我正在尝试使用jquery在asp.net中创建一个自动完成文本框。我的要... 查看详情

使用 Clang 作为编译器构建 Android 项目时从静态库中隐藏符号

】使用Clang作为编译器构建Android项目时从静态库中隐藏符号【英文标题】：HidingsymbolsfromstaticlibrarywhenbuildinganAndroidprojectwithClangascompiler【发布时间】：2018-12-3017:49:51【问题描述】：当gcc用作编译器时隐藏符号可以使用--exclude-libs... 查看详情