import React, { Component } from "react";
import $ from "jquery";

export class App extends Component {
  componentDidMount() {
    $(".dropdown-submenu a.test").on("click", function(e) {
      $(this)
        .next("ul")
        .toggle();
      e.stopPropagation();
      e.preventDefault();
    });
  }

render() {...
 }
}

export default App;

Teraz nie otrzymuję żadnych błędów, ale mój składnik componentDiDMount po prostu nie działa i nie rozumiem, dlaczego. Jestem nowy w reagowaniu, więc może jest jakiś rażący problem, którego nie widzę. Każda pomoc / wgląd byłaby niesamowita.

-1
OBre_1_1 1 kwiecień 2020, 19:30

3 odpowiedzi

Najlepsza odpowiedź

Funkcja componentDidMount prawdopodobnie działa, ale jak mówi @AKX, używanie razem jQuery i React to zły pomysł. Zamiast tego użyj wbudowanych interfejsów API React / JSX, takich jak state, aby wykonać zdarzenie onClick. Coś takiego:

class Dropdown extends React.Component {

  state = {
    showDropdown: false
  }

  toggleDropdown(event) {
    event.preventDefault()
    this.setState({ showDropdown: !this.state.showDropdown })
  }

  render() {
    return (
      <div>
        <a href="#" onClick={this.toggleDropdown}>Show dropdown</span>
        {this.state.showDropdown && <ul>...</dropdown>}
      </div>
  }
}

Co tu się dzieje? Najpierw deklarujemy komponent, tak jak zrobiłeś. Po drugie, inicjalizujemy zmienną stanu (kiedyś było to robione wewnątrz constructor, ale pól klas sprawiają, że jest to zbędne). Początkowo jest to ustawienie false, więc menu będzie widoczne tylko po kliknięciu przycisku. Aby pokazać go podczas renderowania komponentu, zmień na true.

Następnie deklarujemy naszą funkcję, która obsługuje zdarzenie click. Zapobiega to domyślnej akcji (tj. Przejdź do / #), a następnie przełącza wartość showDropdown na odwrotną do tego, jaka jest obecnie.

Następnie ustawiliśmy renderowanie; przekazanie toggleDropdown do zdarzenia onClick. To jest JSX, więc może wyglądać trochę inaczej niż znasz programy obsługi zdarzeń i tym podobne. Na koniec pokazujemy tylko element listy rozwijanej, jeśli this.state.showDropdown jest prawdziwe.

Tak więc część componentDidMount kodu jest właściwie niepotrzebna - jeśli chcesz go wypróbować, możesz uruchomić w nim this.setState({ showDropdown: true }), aby zobaczyć, czy lista rozwijana pokazuje, kiedy komponent montuje / renderuje się. Ale zrób to tylko w celu przetestowania, ponieważ coś tak prostego można zrobić w zmiennej state, w której początkowo ustawiliśmy ją na fałsz.

0
Tom Oakley 1 kwiecień 2020, 16:54

Nie wolno mieszać i dopasowywać jQuery z React, chyba że dokładnie wiesz, co robisz.

Nie ma absolutnie żadnej gwarancji, że węzły DOM, które możesz zobaczyć lub nie w componentDidMount(), zachowają swoje odbiorniki zdarzeń.

0
AKX 1 kwiecień 2020, 16:32

Jquery i React

React obsługuje zdarzenia bezpośrednio i używa wirtualnego DOM, teoretycznie użycie React powinno oznaczać, że po prostu nie musisz używać jQuery. Zmiana modelu DOM przeglądarki poza aplikacją React oznacza, że React potencjalnie nie obsługuje już stanu, zdarzeń i renderowania interfejsu użytkownika. Źródło

Generalnie, jeśli to możliwe, starałbym się unikać używania Jquery w połączeniu z React.

Rozwiązanie

Zalecam wzięcie elementu HTML odpowiadającego klasie „ .dropdown-submenu a.test ” i przeniesienie go do tego komponentu lub osobnego z renderowanym JSX.

Jeśli nie masz pewności, o tym, jak to zrobić, możesz przeczytać tutaj.

Gdy masz już ten nowy komponent, możesz wyrenderować swój JSX, a następnie użyć modułu obsługi zdarzeń onClick firmy React, aby osiągnąć to, co chcesz. Możesz o tym przeczytać tutaj

Na koniec, aby wskazać nieuporządkowany element listy (ul), możesz użyć do tego odwołań reakcji tutaj.

Wszystkie te informacje można znaleźć w dokumentacji React.

0
Shane Creedon 1 kwiecień 2020, 17:31