reactjs - Semantic-ui-react:如何在没有点击/悬停的情况下触发弹出窗口？

Question

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

逻辑相当简单，但是，我无法弄清楚如何让这个弹出窗口监听状态管理中某处的 bool 值(在我的例子中是 MobX)。我可以将内容放入弹出窗口就好了，但是，触发器是一个按钮(如果单击它，内容将显示)-但是我如何让它在某处收听 bool 值？

这里相当简单的类:

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如果需要的话，可以使用 Prop 值(value)。

但是如何在没有悬停/按钮的情况下触发此组件？

Answer 1

传入 isOpen Prop 怎么样？然后你可以在 componentWillReceiveProps 钩子(Hook)上添加一些逻辑:

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 Prop ，这样就可以了。

这是它在您的父组件的渲染中的样子:

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

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