Блог

Я использую react с загрузочной темой, которая использует jquery.

Проблема в том, что выпадающее меню bootstraps и reacts onClick не работают вместе.

Мое решение заключается в том, что я применяю обработчик onClick с помощью jQuery в методе componentDidUpdate() моего компонента. Это работает, как и ожидалось.

Это не работает:

  <ul className="dropdown-menu pull-right">
     <li id="logout-button">
         <a href="#" onClick={this.logout.bind(this)}><i></i> Logout</a>
     </li>
 </ul>
  

Это работает:

 public componentDidUpdate() {
  // workaround: problems with bootstraps dropdown onclick event
  $('#logout-button').click(() => {
      this.logout();
      return false;
  });
}
  

Но как я могу сделать это в чистом react?

Как я могу получить свой элемент dom в react и применить прослушиватель onClick после рендеринга?

Используя React refs , вы можете получить ссылку на элементы DOM внутри компонента.

При привязке событий componentDidMount не забудьте удалить своих внешних слушателей componentWillUnmount .