Semantic-ui-react：如何在不點擊/懸停的情況下觸發Popup？

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}/> 

將此值設置爲控制彈出，理想情況下，這應該是你的父母組件的狀態的一部分。將狀態組件作爲父項是非常重要的，以使彈出框重新呈現