反應：創建可以忽略的警報組件

我正在嘗試創建一個React組件，它將使用引導alert類來顯示錯誤。問題是我想讓它變得可以忽略，但是如果我需要再次顯示錯誤，那麼在警告div內的關閉按鈕中附加一個處理程序以隱藏它並不會使其重新呈現。例如：反應：創建可以忽略的警報組件

class Alert extends React.Component { 
    constructor(props) { 
    super(props) 
    this.handleClick = this.handleClick.bind(this) 
    this.state = { 
     display: true 
    } 
    } 

    handleClick() { 
    this.setState({ 
     display: false 
    }) 
    } 

    render() { 
    return (
     <div> 
     {this.state.display && 
      <div className={"alert alert-" + this.props.type + " alert-dismissible mt10"}> 
      {this.props.message} 
      <button type="button" className="close" onClick={this.handleClick} data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      </div> 
     } 
     </div> 
    ) 
    } 
}

這是Alert組件的工作代碼，單擊其內部的關閉按鈕會隱藏它。這裏的問題：

class FormImageUpload extends React.Component { 
    ... 

    render() { 
    return (
     <form> 
     <input type="text" placeholder="Paste Image Url"/> 
     {this.props.displayUploadError && 
      <Alert type="danger" message="There was an error trying to process the image. Please try again." /> 
     } 
     <button type="submit" className="btn btn-primary mt10">SEND</button> 
     </form> 
    ) 
    } 
}

根父：

class App extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     displayUploadError: false 
    } 
    this.handleRequest = this.handleRequest.bind(this) 
    } 


    handleRequest(image_url) { 
     this.setState({ 
     displayUploadError: true 
     }) 
    } 


    render() { 
    return (
     <div className="demo__wrap"> 
     <FormImageUpload 
      handleRequest={this.handleRequest} 
      displayUploadError={this.state.displayUploadError} 
     /> 
     </div> 
    ) 
    } 
}

我有一個布爾值，表示如果我需要顯示/隱藏Alert組件。但是如果我關閉了警報，它將不會再顯示。我怎樣才能解決這個問題？

來源

2016-12-16 Pietro Coelho

不是設置警報的狀態，而是在表單中設置狀態並將狀態作爲道具傳遞。它應該工作。並使用回調函數onclick警報更新表單上傳組件的狀態。

來源

2016-12-16 20:58:52

但關鍵是要創建一個可以隱藏自己的可重用組件。我已經在窗體組件中顯示了一個布爾值來顯示/隱藏警報 –

爲什麼你需要兩個標誌2隱藏它，只需將布爾值從窗體傳遞到警報作爲道具 –

您的警報不會重新渲染，因爲您設置警報組件，但表單組件不知道有關更改。因此，改變表單的狀態並將其傳遞給孩子 –

是的，通過布爾值也可以隱藏它。這裏是一個模擬代碼

If (boolean) { 
Return Alert 
} 
Else { 
Return null 
}

來源

2016-12-16 21:31:03

在警報中使用它像這樣 –

我已將我的根父組件添加到問題中。如何在Alert組件內部的點擊處理程序隱藏警報但是在根父狀態更新時再次顯示該警報時如何進行此項工作？ –

反應：創建可以忽略的警報組件

回答

相關問題