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

您可以使用middle组件而不是叠加层。 height函数将OverlayTrigger标志设置为true，然后在1秒后再次将其设置为false。

clickOnButton

然后，当show标志为false时，JSX中将创建一个虚拟覆盖。将触发道具设置为clickOnButton = () => { this.setState({ show: true }); setTimeout( () => {this.setState({show: false}); }, 1000); }; renderTooltip(props) { return <Tooltip {...props}>Copied!</Tooltip>; } renderNothing(props) { return <div /> }，希望工具提示能正常工作。

show

Answer 2

我猜你可以听Overlay onEntered并触发setState将show改为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>
    )
  }

如何在x毫秒后隐藏工具提示

2 个答案: