如何隱藏工具提示後x毫秒

Question

試圖找出如何我可以x秒 後不知何故隱藏工具提示它顯示了疊加後：

我使用react-bootstrap's tooltip與overlay一起

export class UserList extends Component { 
     render(){ 
     const { 
      handleResetPassword, 
      resetEmailValidationState, 
      resetEmailValidationUser, 
      statusColor, 
      statusMessage, 
      users 
     } = this.props 

     const userList = users && users.map(
      (user) => 
      <User 
       handleResetPassword={handleResetPassword} 
       key={user.uuid} 
       resetEmailValidationState={resetEmailValidationState} 
       resetEmailValidationUser={resetEmailValidationUser} 
       statusColor={statusColor} 
       statusMessage={statusMessage} 
       user={user} 
      />) 

     return(<Table className='ft-list' responsive> 
      <thead> 
      <tr> 
       <th>uuid</th> 
       <th>First</th> 
       <th>Last</th> 
       <th>email</th> 
      </tr> 
      </thead> 
      <tbody>{userList}</tbody> 
     </Table>) 
     } 
    } 

    export class User extends Component { 
     constructor(){ 
     super() 
     this.state = { 
      showTooltip: false 
     } 
     this.buttonEl = undefined 
     } 

     componentWillReceiveProps(nextProps) { 
     const { resetEmailValidationUser, resetEmailValidationState } = nextProps, 
     { uuid } = nextProps.user 

     this.setState({ showTooltip: uuid === resetEmailValidationUser && resetEmailValidationState === 'success'}) 
     } 
    componentDidMount(){ 
    if(this.overlay.show){ 
     //this.overlay.show = false 
     ReactDOM.findDOMNode(this.overlay).show = false 
    } 
    } 

     render() { 
     const { 
      handleResetPassword, 
      resetEmailValidationState, 
      resetEmailValidationUser, 
      statusColor, 
      statusMessage } = this.props, 
      { uuid, firstName, lastName, email } = this.props.user, 
      button = (
       <span ref={(el) => this.buttonEl = el}> 
       <Overlay 
        animation 
        delayHide="5000" 
        placement='top' 
        show={this.state.showTooltip} 
        ref={(el) => this.overlay = el} 
        target={() => ReactDOM.findDOMNode(this.refs.target)} 
       > 
        <Tooltip id="overload-right">{statusMessage}</Tooltip> 
       </Overlay> 
       <Button 
        bsSize='xsmall' 
        className='ft-reset-password-link background-color-dark-grey' 
        onClick={() => handleResetPassword(uuid, email)} 
        ref="target" 
       > 
        reset password 
       </Button> 
       </span>) 

     return (
      <tr> 
      <td>{uuid}</td> 
      <td>{firstName}</td> 
      <td>{lastName}</td> 
      <td>{email}</td> 
      <td>{button}</td> 
      </tr> 
     ) 
     } 
    } 

我不太明白我怎麼能觸發隱藏（設置顯示爲假但何時何地？）

Answer 1

我想你可以聽重疊onEntered並觸發setState將顯示爲false。像：

export class User extends Component { 
    constructor(){ 
    super() 
    this.state { 
     showTooltip: true 
    } 
    this.buttonEl = undefined 
    } 

    hideTooltip(){ 
    setTimeout(() => this.setState({ showTooltip: false }), 3000) 
    } 

    render() { 
    console.log(this) 
    const { 
     handleResetPassword, 
     resetEmailValidationState, 
     resetEmailValidationUser, 
     statusColor, 
     statusMessage } = this.props, 
     { uuid, firstName, lastName, email } = this.props.user, 
     overlayProps = { show: uuid === resetEmailValidationUser}, 
     button = (
     <span ref={(el) => this.buttonEl = el}> 
      <Overlay 
      animation 
      delayHide="5000" 
      {...overlayProps} 
      placement='top' 
      onEntered={() => this.hideTooltip()} 
      ref={(el) => this.overlay = el} 
      target={() => ReactDOM.findDOMNode(this.refs.target)} 
      > 
      <Tooltip show={ this.state.showTooltip } id="overload-right">{statusMessage}</Tooltip> 
      </Overlay> 
      <Button 
      bsSize='xsmall' 
      className='reset-password-link background-color-dark-grey' 
      onClick={() => handleResetPassword(uuid, email)} 
      > 
      reset password 
      </Button> 
     </span>) 

    return (
     <tr> 
     <td>{uuid}</td> 
     <td>{firstName}</td> 
     <td>{lastName}</td> 
     <td>{email}</td> 
     <td>{button}</td> 
     </tr> 
    ) 
    }