Как скрыть всплывающую подсказку через x миллисекунд

Question

Попытка выяснить, как я могу как-то скрыть всплывающую подсказку через x секунд после ее отображения в оверлее:

Я использую всплывающую подсказку реагирования с начальной загрузкой вместе

    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, а затем снова устанавливает его false через 1 секунду.

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

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


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


renderNothing(props) {
    return <div />
  }

Затем в JSX создайте фиктивный оверлей, который будет выполняться, когда showфлаг ложный. Установите опору триггера на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>

Answer 2

Я думаю, вы можете слушать оверлей 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>
    )
  }

Answer 3

я использовалOverlayTriggerдляTooltipсshowиonToggleprops с обратным вызовом, чтобы установить состояние отображения всплывающей подсказки. Если обратный вызов получает true, он устанавливает таймер, чтобы установить состояние показа в false через 3 секунды.

      const IconButton = ({ tooltipText, onClick }) => {
    const [showTooltip, setShowTooltip] = useState(false);

    const handleToggleShow = useCallback((showTooltip) => {
        setShowTooltip(showTooltip);
        if (showTooltip === true) {
            setTimeout(() => setShowTooltip(false), 3000);
        }
    }, []);

    return (
        <>
            <OverlayTrigger
                delay={{ show: 250, hide: 250}}
                placement='bottom-start'
                show={showTooltip}
                onToggle={handleToggleShow}
                overlay={
                    <Tooltip
                        id={`tooltip-${tooltipText}`}
                        style={{ margin: 0 }}
                    >
                        {tooltipText}
                    </Tooltip>
                }
            >
                <div>
                    <MyIcon
                        onClick={onClick}
                    />
                </div>
            </OverlayTrigger>
        </>
    );
};