javascript - 如何在 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>
        )
      }
    }

我不太明白如何触发隐藏(将 show 设置为 false 但何时何地？)

Answer 1

您可以使用OverlayTrigger组件代替覆盖。 clickOnButton 函数将 show 标志设置为 true，然后在 1 秒后再次将其设置为 false。

clickOnButton = () => {
    this.setState({
        show: true
    });

    setTimeout( () => {this.setState({show: false}); }, 1000);
    };


renderTooltip(props) {
    return <Tooltip {...props}>Copied!</Tooltip>;
  }


renderNothing(props) {
    return <div />
  }

然后在 JSX 中创建一个虚拟覆盖，当 show 标志为 false 时发生。将触发器属性设置为click，希望工具提示能够正常工作。

 <OverlayTrigger key='right' placement='right' trigger='click'
                 overlay={this.state.show? renderTooltip : renderNothing}
                            >
  <button className='btn btn-success' onClick={this.clickOnButton}> 
      Copy
  </button>

</OverlayTrigger>