React- event onClick nie działa

Question

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

 

Comments

Czy w konsoli są jakieś błędy?

---

w konsoli nie ma błędów....

---

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.

Answer 1

Komponent funkcyjny powinien być funkcją  nazwaną a handleClick  'zmienną stałą' do której przypisujesz funkcje anonimową.

Comments

dalej nie działa....

---

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??

---

@rob,

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

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

 

Answer 2

Może zamień 

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

na

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

 

Comments

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!!!