当显示另一个相同的组件时隐藏组件

我有一个项目列表（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

当显示另一个相同的组件时隐藏组件

回答

相关问题