Question

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

逻辑非常简单，但是，我无法弄清楚如何让这个弹出窗口在状态管理中的某个地方监听布尔值（在我的例子中是MobX）。我可以将内容放入Popup中，但是，触发器是一个按钮（内容会显示，如果你点击它） - 但是如何让它在某个地方听一个布尔值？

这里相当简单的课程：

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值。

但是如果不将它作为悬停/按钮，我如何使该组件触发？

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：如何在没有点击/悬停的情况下触发弹出窗口？

1 个答案: