Semantic-ui-react：如何在没有 click/hover 的情况下触发弹出窗口？

Question

提交表单时，如果服务器发回错误响应，我希望显示一个 2.5 秒的小弹出窗口。

逻辑相当简单，但是，我不知道如何让这个弹出窗口在状态管理（在我的例子中是 MobX）中的某个地方监听布尔值。我可以很好地将内容放入 Popup，但是，触发器是一个按钮（如果单击它，内容将显示）-但是我如何让它在某处收听布尔值？

这里相当简单class：

import React from "react";
import { Popup, Button } from "semantic-ui-react";
import { inject } from "mobx-react";
const timeoutLength = 2500;

@inject("store")
export default class ErrorPopup extends React.Component {

    state = {
        isOpen: false
    };

    handleOpen = () => {
        this.setState({
            isOpen: true
        });

        this.timeout = setTimeout(() => {
            this.setState({
                isOpen: false
            })
        }, timeoutLength)
    };

    handleClose = () => {
        this.setState({
            isOpen: false
        });
        clearTimeout(this.timeout)
    };

    render () {

        const errorContent = this.props.data;


        if(errorContent){
            return(
                <Popup
                    trigger={<Button content='Open controlled popup' />}
                    content={errorContent}
                    on='click'
                    open={this.state.isOpen}
                    onClose={this.handleClose}
                    onOpen={this.handleOpen}
                    position='top center'
                />
            )
        }
    }
}

但是，触发值是一个按钮，如果 this.props.data 存在则呈现该按钮。但这不是我希望的行为；如果 this.props.data 存在，我只是想让弹出窗口呈现（并因此触发）；或者，如果需要，我可以提供一个带有道具的 true 值。

但是如何让这个组件在不成为 hover/button 的情况下触发？

Answer 1

传入 isOpen 属性如何？然后你可以在 componentWillReceiveProps 挂钩上添加一些逻辑：

import React from "react";
import { Popup, Button } from "semantic-ui-react";
import { inject } from "mobx-react";
const timeoutLength = 2500;

@inject("store")
export default class ErrorPopup extends React.Component {

 constructor(props) {
   super(props);
   this.state = {
     isOpen: false,
   }
 };

  //This is where you trigger your methods
  componentWillReceiveProps(nextProps){
    if(true === nextProps.isOpen){
      this.handleOpen();
    } else {
      this.handleClose();
    }
  }

  handleOpen = () => {

    this.setState({
      isOpen: true
    });

    this.timeout = setTimeout(() => {
      //No need to repeat yourself - use the existing method here
      this.handleClose();
    }, timeoutLength)
  };

  handleClose = () => {
    this.setState({
      isOpen: false
    });
    clearTimeout(this.timeout)
  };

  render () {

    const errorContent = this.props.data;

    if(errorContent){
      return(
        <Popup
          trigger={<Button content='Open controlled popup' />}
          content={errorContent}
          on='click'
          open={this.state.isOpen}
          position='top center'
        />
      )
    }
  }
}

不需要处理延迟 - 你可以简单地传入 isOpen 属性，这样就可以了。

这里是它在父组件的渲染中的样子：

let isOpen = this.state.isOpen; 
<ErrorPopup isOpen={isOpen}/>

设置这个值来控制弹出窗口，理想情况下，这应该是你父组件状态的一部分。将有状态组件作为父组件对于重新呈现弹出窗口很重要

Semantic-ui-react：如何在没有 click/hover 的情况下触发弹出窗口？

Semantic-ui-react: How do I trigger a Popup without it being click/hover?

reactjs

semantic-ui

semantic-ui-react