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

React- event onClick nie działa

Object Storage Arubacloud
0 głosów
405 wizyt
pytanie zadane 22 maja 2020 w JavaScript przez rob Bywalec (2,440 p.)

ReactJS. W Reakcie nie działa mi event onClick na buttonie . Jest to dość proste, ale zrobiłem jakiś błąd którego nie widzę i drepczę w kółko. Mógłby ktoś na to zerknąć?

import React from 'react';


const New = () => {

    function handleClick() {
        console.log('Kliknieto w link.');
    }

    return (
        <>
            <div className='wrapper'>
                <div className='header'>

                    <button onClick={handleClick}>BBBBB</button>
                   
                    <div className='me'></div>
                    <div className="sun">

                        <div className="dot"><i className="fab fa-js-square"></i></div>
                    </div>
                    <div className="sun2">
                        <div className="dot"><i className="fab fa-html5"></i></div>

                    </div>
                    <div className="sun3">
                        <div className="dot"><i className="fab fa-css3-alt"></i></div>

                    </div>
                    <div className="sun4">
                        <div className="dot"><i className="fab fa-sass"></i></div>

                    </div>
                    <div className="sun5">
                        <div className="dot"><i className="fab fa-react"></i></div>

                    </div>
                    <div className="sun6">
                        <div className="dot"><i className="fab fa-git-alt"></i></div>

                    </div>
                    <div className="sun7">
                        <div className="dot"><i className="fab fa-github"></i></div>
                    </div>
                    <div className="sun8">
                        <div className="dot"><i className="fab fa-npm"></i></div>
                    </div>
                    <div className="sun9">
                        <div className="dot"><i className="fab fa-node"></i></div>
                    </div>


                </div>
            </div >

        </>
    )
}
export default New

 

komentarz 22 maja 2020 przez ScriptyChris Mędrzec (190,190 p.)
Czy w konsoli są jakieś błędy?
komentarz 22 maja 2020 przez rob Bywalec (2,440 p.)
w konsoli nie ma błędów....
komentarz 22 maja 2020 przez ScriptyChris Mędrzec (190,190 p.)

Sprawdź w devtoolsach przeglądarki (Chrome / Firefox), czy do tego przycisku są podpięte jakieś event listenery. Ciekawe, czy Twoja funkcja w ogóle jest podpięta na click event.

2 odpowiedzi

0 głosów
odpowiedź 22 maja 2020 przez pablop76 VIP (123,180 p.)
wybrane 23 maja 2020 przez rob
 
Najlepsza
Komponent funkcyjny powinien być funkcją  nazwaną a handleClick  'zmienną stałą' do której przypisujesz funkcje anonimową.
komentarz 22 maja 2020 przez rob Bywalec (2,440 p.)
dalej nie działa....
komentarz 22 maja 2020 przez rob Bywalec (2,440 p.)
Już wiem o co chodzi, button dałem do rodzica i działa!! W tym divie w którym był poprzednio są animacje i one w jakiś sposób zakłócają onClick, tylko dalej nie wiem co ma Css do javascriptu??
komentarz 23 maja 2020 przez pablop76 VIP (123,180 p.)

@rob,

function New(){
 
   const handleClick = () => {
        console.log('Kliknieto w link.');
    }
 
    return (
             <button onClick={handleClick}>BBBBB</button>          
    )
}

ReactDOM.render(
  <New />,
  document.getElementById('root')
);

 

0 głosów
odpowiedź 22 maja 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

Może zamień 

function handleClick() {
        console.log('Kliknieto w link.');
    }

na

const handleClick = () => {
    console.log('KILKNIETO W LINK');
}

 

komentarz 22 maja 2020 przez rob Bywalec (2,440 p.)
poprzednio tak było, teraz też zmieniłem - dalej nie działa, dziwnie to wygląda bo wydaje się że tam nie ma błędu!!!

Podobne pytania

0 głosów
1 odpowiedź 269 wizyt
pytanie zadane 17 listopada 2020 w JavaScript przez Bartek12 Mądrala (5,510 p.)
0 głosów
1 odpowiedź 158 wizyt
pytanie zadane 19 czerwca 2023 w JavaScript przez pj-1024 Użytkownik (670 p.)
+4 głosów
3 odpowiedzi 397 wizyt

92,669 zapytań

141,567 odpowiedzi

320,034 komentarzy

62,034 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!

...