Je suis assez nouveau pour réagir et je me demandais comment je changerais le code ci-dessous pour que j'utilise la fonction onClick pour chacune des balises de section.
render(){
return(
<div className='App'>
< Header />
<div className="secHeader"><h2>General Education Core</h2></div>
<br/>
{/* Displays the 6 different gen eds cateogry that uic offers and calls the displaygenEdCourse component and sends props to know which item was clicked */}
<div className="box alt container">
{/* link for Analyzing the Natural World */}
<section className="feature left">
<Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'ANW' }}} className="image icon solid fa-seedling"><img src={pic01} alt="pic01" /></Link>
<div className="content">
<h3>Analyzing the Natural World</h3>
</div>
</section>
{/* link for Understanding the Individual and Society */}
<section className="feature right">
<Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'UIS' }}} className="image icon solid fa-users"><img src={pic01} alt="pic01" /></Link>
<div className="content">
<h3>Understanding the Individual and Society</h3>
</div>
</section>
{/* link for Understanding the Past */}
<section className="feature left">
<Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'UP' }}} className="image icon solid fa-history"><img src={pic01} alt="pic01" /></Link>
<div className="content">
<h3>Understanding the Past</h3>
</div>
</section>
{/* link for Understanding the Creative Arts */}
<section className="feature right">
<Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'UCA' }}} className="image icon solid fa-palette"><img src={pic01} alt="pic01" /></Link>
<div className="content">
<h3>Understanding the Creative Arts</h3>
</div>
</section>
{/* link for Exploring World Cultures */}
<section className="feature left">
<Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'EWC' }}} className="image icon solid fa-globe"><img src={pic01} alt="pic01" /></Link>
<div className="content">
<h3>Exploring World Cultures</h3>
</div>
</section>
{/* link for Understanding U.S. Society */}
<section className="feature right">
<Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'UUS' }}} className="image icon solid fa-flag-usa"><img src={pic01} alt="pic01" /></Link>
<div className="content">
<h3>Understanding U.S. Society</h3>
</div>
</section>
</div>
< Footer />
</div>
)
}
Chaque balise de section est un bloc / image sur lequel je veux pouvoir cliquer et lorsque je clique dessus, il doit appeler la fonction onClick afin que je reçoive une notification sur la section sur laquelle vous avez cliqué. J'ai essayé de mettre onClick à l'intérieur de la balise de section comme . J'ai également essayé de jouer et de placer onClick à d'autres endroits dans chaque balise de section, mais cela ne semblait pas fonctionner. Chaque fois que la page s'affiche, onClick est appelé, puis lorsque je clique sur cette image, il n'appelle pas onClick. Je ne sais pas où je me trompe.
5 Réponses :
Vous devez l'écrire sous forme de fonction fléchée, pour ne pas être appelée immédiatement:
<section className="feature left" onClick={() => console.log('testing')}>
Les rappels
onClick prennent une fonction, donc quelque chose comme onClick = {() => console.log ('testing')} . En l'état, vous invoquez ce que vous voulez exécuter plus tard plutôt immédiatement.
const clickHandler = () => console.log('testing');
<section
className="feature left"
onClick={clickHandler}
>
...
Cela peut aussi être une fonction
<section
className="feature left"
onClick={function() {
console.log('testing');
}}
>
...
Ou l'un ou l'autre et défini en externe, remarquez ici que vous passez directement la fonction, sans parenthèses.
<section
className="feature left"
onClick={() => console.log('testing')}
>
...
Vous étiez proche, mais onClick prend une fonction. Essayez plutôt onClick = {() => console.log ('testing')} .
La différence subtile mais importante ici est que ce que vous avez est l'équivalent de:
< pré> XXXC'est parce que lorsque vous écrivez "console.log ('testing')", vous appelez la fonction sur le rendu du composant. Afin de travailler avec votre clic, vous devez créer une fonction qui appelle console.log. La syntaxe correcte est donc:
<section className="feature left" onClick={() => console.log('testing')}>
Vous n'appelez pas correctement votre onClick. Vous devez lui transmettre une fonction anonyme si vous souhaitez appeler des fonctions directement dans onClick. Par exemple, consultez la syntaxe ES6 ci-dessous pour votre exemple:
class SomeComponent extends React {
constructor stuff...
onSectionClick = () => {
console.log('testing');
};
render() {
return() {
<section className="feature left" onClick={onSectionClick}>
<Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'EWC' }}} className="image icon solid fa-globe"><img src={pic01} alt="pic01" /></Link>
<div className="content">
<h3>Exploring World Cultures</h3>
</div>
</section>
}
}
}
Vous pouvez également créer une fonction de flèche en dehors de vos méthodes de rendu et l'utiliser directement à la place:
class SomeComponent extends React.Component {
constructor stuff...
render() {
return() {
<section className="feature left" onClick={() => console.log('testing')}>
<Link to={{pathname: "/displayGenEdCourses", state: { linkState: 'EWC' }}} className="image icon solid fa-globe"><img src={pic01} alt="pic01" /></Link>
<div className="content">
<h3>Exploring World Cultures</h3>
</div>
</section>
}
}
}