Скрыть компонент, когда показан другой идентичный компонент с React

Question

У меня есть список элементов (ResultItem), в которых есть компонент внутри (ResultTag), который при щелчке показывает всплывающую подсказку над ним (к нему добавляется HTML-класс и удаляется при повторном нажатии, чтобы скрыть его).

Однако, когда я нажимаю на ResultTag, а затем на ResultTag в одном из ResultItem под ним, оба показывают; как бы я скрывал все ResultTag, кроме того, на который я только что нажал, чтобы можно было показывать только один за раз.

В настоящее время, в ResultItem, у меня есть onClick функцию, которая устанавливает состояние showTooltip в ResultTag ложь/скрытый (с использованием реквизита) всякий раз, когда пользователь нажимает кнопку в любом месте в пределах ResultItem и ResultTag видно. Тем не менее, мне нужно, чтобы это работало через каждые 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

Answer 1

Вы можете перенести состояние из каждого отдельного ResultItem в родительский объект, таким образом, он централизуется в одном месте, и вы можете применять логику таким образом, чтобы только определенный ResultItem отображал свою всплывающую подсказку. Вам нужно будет управлять состоянием из родительского объекта, а затем передать функцию каждому ResultItem (и, возможно, снова вернуться в свой ResultTag) для обработки щелчка.

Я написал пример приложения, которое показывает подобное поведение (хотя и немного другое), я написал его, чтобы продемонстрировать, как добавить границу к каждому элементу в списке. Вы можете увидеть, как я сохранил состояние в родительском объекте и как передал средства для чтения и обновления его детям через реквизиты. Разумеется, вы должны изменить логику, чтобы применить только один активный элемент, в настоящее время он поддерживает любой элемент в списке, который является «активным». Я написал для ответа, который находится здесь: https://stackoverflow.com/a/38646533/1515758