1
votes

Je ne comprends pas pourquoi l'événement onclick ne se déclenche pas

J'ai reçu une galerie avec des images. Sur chaque image, il y a 3 icônes qui sont supposées agir lorsque vous cliquez dessus. J'essaye d'activer l'événement onclick sur les icônes d'image mais rien ne se passe. Les icônes d'image sont créées dans la fonction de rendu avec font-awsome. Je suis nouveau dans JavaScript.

J'ai essayé de rechercher d'autres questions ici sur le site, mais aucune des solutions n'a fonctionné pour moi.

la fonction que je souhaite activer:

 render() {
   return (
     <div
       className="image-root"
       style={{
         backgroundImage: `url(${this.urlFromDto(this.props.dto)})`,
         width: this.state.size + 'px',
         height: this.state.size + 'px'
       }}
       >
       <div>

         <FontAwesome className="image-icon" name="clone" title="clone"/>  
         <FontAwesome className="image-icon" name="filter" title="filter" />
         <FontAwesome className="image-icon" name="expand" title="expand" onclick={ this.setNewSize} />
       </div>


     </div>
   );
 }


}

javascript reactjs onclick imageicon

0 commentaires

4 Réponses :

3
votes

React utilise la convention CamelCase, vous devez donc mettre onClick = {this.setNewSize} au lieu de onclick = {this.setNewSize} . Cela fonctionne-t-il pour vous?

1 commentaires

Ce n'est pas une bonne réponse bien que cela résoudra le problème.

3
votes

Le problème est onclick = {this.setNewSize}

En réaction, cela devrait être onClick , changez comme ceci;

La gestion des événements dans React est similaire à la gestion des événements en HTML, mais il existe quelques différences clés:

Les événements React sont nommés en utilisant camelCase tandis que les événements HTML sont souvent désignés en minuscules
Dans JSX, vous transmettez une fonction en tant que gestionnaire d'événements plutôt que le nom de la fonction (chaîne)
Vous ne pouvez pas renvoyer false pour empêcher le comportement par défaut dans react. Au lieu de cela, vous devez appeler e.preventDefault ();

J'espère que cela vous aidera, et n'oubliez pas de lier les méthodes.

3 commentaires

Ce n'est pas une bonne réponse bien que cela résoudra le problème.

@ShubhamKhatri pouvez-vous expliquer pourquoi? cela pourrait aider.

J'ai ajouté une réponse

0
votes

Vous devez utiliser onClick mais n'oubliez pas non plus de lier le setNewSize, vous pouvez le faire de trois manières

1. onclick = {this.setNewSize.bind (this)}

2. constructeur (accessoires) { super (accessoires); this.setNewSize = this.setNewSize.bind (this); } 3. const setNewSize = () => {....}

0 commentaires

0
votes

Il y a peu de choses que vous devez savoir

FontAwesome est un composant de réaction personnalisé écrit par vous ou utilisé à partir d'une bibliothèque
Les attributs passés à un composant de réaction personnalisé sont transmis au composant en tant qu'accessoires et, à moins qu'ils ne soient utilisés dans le composant et transmis aux éléments DOM, ils n'auront aucun effet. Pour en savoir plus sur cette vérification, ce message

3.Vous devez lier les méthodes soit dans le constructeur, soit en utilisant la fonction de flèche pour utiliser this correctement dans celui-ci.

Pour résoudre le problème ci-dessus, vous devez vérifier la documentation du composant si vous l'utilisez depuis une bibliothèque et voir quels accessoires il faut pour traiter un événement onClick. Selon toute probabilité, ce sera onClick dans le cas du chameau.

Si vous avez écrit le composant vous-même, assurez-vous de suivre les instructions de l'article lié pour résoudre le problème. transmettez l'accessoire comme un pair à l'élément DOM.

0 commentaires