• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

React onClick problem

Object Storage Arubacloud
0 głosów
265 wizyt
pytanie zadane 17 listopada 2020 w JavaScript przez Bartek12 Mądrala (5,510 p.)

Po kliknięciu przycisku nic się nie dzieję

kod:

const show = () => {
    console.log("a");
}

const cards = state.map(el =>
    <div key={el.id} className="gallery-card">
        <img src={require('./../img/' + el.image)} alt="" />
        {el.name}
        <Button onClick={show}>Zobacz</Button>
    </div>
);

 

1 odpowiedź

+1 głos
odpowiedź 17 listopada 2020 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 17 listopada 2020 przez Bartek12
 
Najlepsza
a co się dzieje w komponencie <Button>? Pokaż jak tam wywołujesz propsa onClick. A tak po za tym to radziłbym unikać nazywania własnych propsów tak, jak są nazywane eventy...
komentarz 17 listopada 2020 przez ScriptyChris Mędrzec (190,190 p.)

Ten <Button> to raczej nie jest komponent, a zwykły HTML-owy przycisk, bo w React komponentów AFAIK używa się w formie samo zamykającego się znacznika.

Chyba, że tu autor pytania użył a'la projekcji contentu.

1
komentarz 17 listopada 2020 przez Tomek Sochacki Ekspert (227,510 p.)
To jak użyjesz znacznika zależy od przypadku, sam wiele razy stosowałem definiowanie children komponentu, czasami to przydatny sposób na uniwersalny wrapper. A z kodu jaki został pokazany jasno widać że to custom component a nie htmlowy button, zwróć uwagę na wielką literę "B".
komentarz 17 listopada 2020 przez ScriptyChris Mędrzec (190,190 p.)

Racja, JSX patrzy na wielkość liter. Myślałem, że to ma znaczenie głównie przy event handlerach.

Note: Always start component names with a capital letter.

React treats components starting with lowercase letters as DOM tags. For example, <div /> represents an HTML div tag, but <Welcome /> represents a component and requires Welcome to be in scope.

To learn more about the reasoning behind this convention, please read JSX In Depth

Podobne pytania

0 głosów
2 odpowiedzi 399 wizyt
pytanie zadane 22 maja 2020 w JavaScript przez rob Bywalec (2,440 p.)
0 głosów
1 odpowiedź 230 wizyt
0 głosów
1 odpowiedź 157 wizyt
pytanie zadane 19 czerwca 2023 w JavaScript przez pj-1024 Użytkownik (670 p.)

92,661 zapytań

141,557 odpowiedzi

319,999 komentarzy

62,028 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...