Reactjs 如何在特定时间后隐藏工具提示

在react中4秒后如何隐藏工具提示

我使用的工具提示类工作正常。当我将鼠标悬停在标签上时，工具提示将显示，当我离开标签时，工具提示将消失。我想在鼠标悬停时显示工具提示4秒，然后隐藏。如何在“反应”中执行此操作

     <Field
      name='termsAndConditions'
      label='Terms'
      component={Checkbox}
      hover={textOnTermsHover}//the text which is hovered
      time={timeAfterWhichItHide} // this is the amount of time 
                                 //the hover should display
    />




     export const Checkbox = (inputProps) => {
     const { input, label, hover, time } = inputProps
     const { name } = input

     return (
       <label className='checkbox-a'>
      <input {...input}  checked={checked} 
      type='checkbox' />
      <div className='checkbox-a__box' id={name} />

     <div>
     <p className='checkbox--links' tabindex='0' aria- 
     describedby='tooltip-cb class='tooltip'>
      <u>{label}</u>//label on whose hover the tooltip is 
     displayed
      <div role='tooltip' class='tooltip__content' id='tooltip- 
      cb-02'>{hover}</div> //the text which is hovered when on 
     label
    </p>
    </div>
    </label>
    )
   }

导出常量复选框=（inputProps）=>{
const{input，label，hover，time}=inputProps
常量{name}=输入
返回(
您必须向组件添加状态，以跟踪工具提示何时显示或隐藏。
这是带有工具提示状态跟踪和延迟处理的代码。
请注意，下面的代码需要React@16.8.1以及以上，因为它使用了新的hooks API

//react@^16.8.1
import React, { useState, useRef, useEffect } from 'react';

export const Checkbox = (inputProps) => {
  const { input, label, hover, time } = inputProps
  const { name } = input
  const timeout = useRef(null) // to store a handle to timeout so that it can be cleared
  const [isShowing, setIsShowing] = useState(false) // tooltip show/hide state
  const handleMouseEnter = () => {
    // when mouse enters element
    if (!isShowing) {
      setIsShowing(true) // show tooltip
      timeout.current = setTimeout(() => setIsShowing(false), time) // schedule to hide tooltip
    }
  }
  const onMouseOut = () => {
     // when mouse leaves element
    if (isShowing) {
      setIsShowing(false) // hide tooltip
    }
    if (timeout.current) {
      clearTimeout(timeout.current) // cancel scheduled hiding of tooltip
      timeout.current = null
    }
  }
  useEffect(() => () => {
    // when component unmounts, clear scheduled hiding - nothing to hide by this point=)
    if (timeout.current) {
      clearTimeout(timeout.current)
      timeout.current = null
    }
  }, [])

  return (
    <label className='checkbox-a'>
      <input
        {...input}
        checked={checked} 
        type='checkbox'
      />
      <div className='checkbox-a__box' id={name} />
      <div>
        <p
          className='checkbox--links'
          tabindex='0'
          aria-describedby='tooltip-cb'
          className='tooltip'
          onMouseEnter={handleMouseEnter}
          onMouseOut={onMouseOut}
        >
          <u>{label}</u>
          {/* render tooltip conditionally */}
          {isShowing && <div
            role='tooltip'
            class='tooltip__content'
            id='tooltip-cb-02'
          >
            {hover}
          </div>}
        </p>
      </div>
    </label>
  )
}

//react@^16.8.1
从“React”导入React，{useState，useRef，useffect}；
导出常量复选框=（inputProps）=>{
const{input，label，hover，time}=inputProps
常量{name}=输入
const timeout=useRef（null）//存储超时句柄以便清除超时
const[isShowing，setIsShowing]=useState（false）//工具提示显示/隐藏状态
常量HandleMouseCenter=（）=>{
//当鼠标进入元素时
如果（！isShowing）{
setIsShowing（true）//显示工具提示
timeout.current=setTimeout（（）=>setIsShowing（false），time）//计划隐藏工具提示
}
}
const onMouseOut=（）=>{
//当鼠标离开元素时
如果（正在显示）{
setIsShowing（false）//隐藏工具提示
}
if（超时。当前）{
clearTimeout（timeout.current）//取消工具提示的计划隐藏
timeout.current=null
}
}
使用效果（（）=>（）=>{
//当组件卸载时，清除计划隐藏-此时没有要隐藏的内容=）
if（超时。当前）{
clearTimeout（timeout.current）
timeout.current=null
}
}, [])
返回(

{label}
{/*有条件地呈现工具提示*/}
{isShowing&&
{悬停}
}

)
}

或者，这可以通过一个类组件来完成——如果您还想要一个这样的例子，请告诉我。
希望这有帮助！
您必须向组件添加状态，以跟踪工具提示何时显示或隐藏。
这是带有工具提示状态跟踪和延迟处理的代码。
请注意，下面的代码需要React@16.8.1以及以上，因为它使用了新的hooks API

//react@^16.8.1
import React, { useState, useRef, useEffect } from 'react';

export const Checkbox = (inputProps) => {
  const { input, label, hover, time } = inputProps
  const { name } = input
  const timeout = useRef(null) // to store a handle to timeout so that it can be cleared
  const [isShowing, setIsShowing] = useState(false) // tooltip show/hide state
  const handleMouseEnter = () => {
    // when mouse enters element
    if (!isShowing) {
      setIsShowing(true) // show tooltip
      timeout.current = setTimeout(() => setIsShowing(false), time) // schedule to hide tooltip
    }
  }
  const onMouseOut = () => {
     // when mouse leaves element
    if (isShowing) {
      setIsShowing(false) // hide tooltip
    }
    if (timeout.current) {
      clearTimeout(timeout.current) // cancel scheduled hiding of tooltip
      timeout.current = null
    }
  }
  useEffect(() => () => {
    // when component unmounts, clear scheduled hiding - nothing to hide by this point=)
    if (timeout.current) {
      clearTimeout(timeout.current)
      timeout.current = null
    }
  }, [])

  return (
    <label className='checkbox-a'>
      <input
        {...input}
        checked={checked} 
        type='checkbox'
      />
      <div className='checkbox-a__box' id={name} />
      <div>
        <p
          className='checkbox--links'
          tabindex='0'
          aria-describedby='tooltip-cb'
          className='tooltip'
          onMouseEnter={handleMouseEnter}
          onMouseOut={onMouseOut}
        >
          <u>{label}</u>
          {/* render tooltip conditionally */}
          {isShowing && <div
            role='tooltip'
            class='tooltip__content'
            id='tooltip-cb-02'
          >
            {hover}
          </div>}
        </p>
      </div>
    </label>
  )
}

//react@^16.8.1
从“React”导入React，{useState，useRef，useffect}；
导出常量复选框=（inputProps）=>{
const{input，label，hover，time}=inputProps
常量{name}=输入
const timeout=useRef（null）//存储超时句柄以便清除超时
const[isShowing，setIsShowing]=useState（false）//工具提示显示/隐藏状态
常量HandleMouseCenter=（）=>{
//当鼠标进入元素时
如果（！isShowing）{
setIsShowing（true）//显示工具提示
timeout.current=setTimeout（（）=>setIsShowing（false），time）//计划隐藏工具提示
}
}
const onMouseOut=（）=>{
//当鼠标离开元素时
如果（正在显示）{
setIsShowing（false）//隐藏工具提示
}
if（超时。当前）{
clearTimeout（timeout.current）//取消工具提示的计划隐藏
timeout.current=null
}
}
使用效果（（）=>（）=>{
//当组件卸载时，清除计划隐藏-此时没有要隐藏的内容=）
if（超时。当前）{
clearTimeout（timeout.current）
timeout.current=null
}
}, [])
返回(

{label}
{/*有条件地呈现工具提示*/}
{isShowing&&
{悬停}
}

)
}

或者，这可以通过一个类组件来完成——如果您还想要一个这样的例子，请告诉我。
希望这会有所帮助！
您可以使用
转换延迟属性，这里是一个。
您可以使用
转换延迟属性，这里是一个。
您可以使用工具提示的打开属性设置鼠标输入事件的超时，并将此.state.ToolTipsOpen设置为false进入类状态

<Tooltip
  arrow
  title={<h6 className="my-auto">Manage Account</h6>}
  placement="bottom"
  style={{ color: "white", background: "transparent" }}
  open={this.state.tooltipIsOpen}
/>

您可以使用工具提示的打开属性设置鼠标输入事件的超时，并将this.state.tooltipIsOpen设置为false，使其进入类状态

<Tooltip
  arrow
  title={<h6 className="my-auto">Manage Account</h6>}
  placement="bottom"
  style={{ color: "white", background: "transparent" }}
  open={this.state.tooltipIsOpen}
/>


Hi…我试过了，但没有达到预期的效果…谢谢你的评论…让我了解像我这样的初学者Hi…我试过了，但没有达到预期的效果…谢谢你的评论…让我了解像我这样的初学者