當顯示另一個相同的組件時隱藏組件

我有一個項目列表（ResultItem），其中包含一個組件（ResultTag），當單擊該組件時，它將顯示一個工具提示在其上方（將HTML類添加到其中並將其刪除當再次點擊時，隱藏它）。當顯示另一個相同的組件時隱藏組件

但是，當我點擊ResultTag，然後點擊ResultTag在其中一個ResultItem的下面，都顯示;我將如何去隱藏ResultTag的所有除了我剛剛點擊的那個以外，所以一次只能顯示一個。

目前，在ResultItem，我有一個onClick功能每當用戶點擊任何地方內ResultItem和ResultTag可見這臺狀態showTooltip在ResultTag爲false /隱藏（使用道具）。然而，我需要這個工作跨越每個ResultItem，這意味着工作的交叉組件。

下面是一些簡化的代碼：

/* ResultTag */ 

showTooltip() { 
    this.setState({ showTooltip: true }) 
} 

render() { 
    return (
     <div onClick={this.showTooltip}> 
      {this.renderTooltip()} { /* function which contains the JSX/HTML to show the toolip */ } 
      <span className="tag--label">Tags</span> 
     </div> 
    ) 
}

隱藏在ResultItem完成的，通過設置狀態，然後接收作爲ResultTag道具。

總結：

我有許多ResultItem組分在列表視圖
每個ResultItem具有，一個ResultTag點擊它時，示出了標籤/標籤
上的工具提示當ResultTag是可見的，另一個在不同的ResultItem被點擊，隱藏所有其他ResultTag s

來源

2016-07-28 Tom Oakley

您可以將每個ResultItem中的狀態移動到父項中，這樣它就集中在一個位置，並且可以強制執行邏輯，以便只有某個ResultItem纔會顯示其工具提示。您需要從父級內部管理狀態，然後將函數傳遞給每個ResultItem（並可能再次下載到其ResultTag中）以處理點擊。

我寫了一個示例應用程序，它顯示了類似的行爲（儘管略有不同），我寫它來演示如何爲列表中的每個項目添加邊框。你可以看到我是如何將狀態存儲在父項中的，以及如何通過道具傳遞讀取和更新給孩子的方法。當然，您必須更改邏輯以強制執行一個活動的項目，目前它支持列表中的任何項目處於「活動」狀態。我寫了一個答案位於這裏：https://stackoverflow.com/a/38646533/1515758

來源

2016-07-28 23:04:28 John

當顯示另一個相同的組件時隱藏組件

回答

相關問題