"Impossible de lire la propriété 'onClick' de undefined" dans le composant React

Question

J'utilise Reactstrap dans mon projet d'intégration Bootstrap. Cependant, j'ai également besoin d'étendre le comportement onClick du composant Button qui sort de la boîte avec Reactstrap. À cette fin, j'ai fait un composant personnalisé NanoButton qui recompose le composant par défaut. Voici comment je l'appeler:

<NanoButton type="button" onClick={() => Router.push('/about')}>About</NanoButton> 

Le composant NanoButton, comme je l'ai dit, ajoute ma fonctionnalité personnalisée onClick à la classe Button existante:

import { Component } from 'react'; 
import { Button } from 'reactstrap'; 

class NanoButton extends Component { 
    constructor(props) { 
    super(props); 
    this.onClick = this.onClick.bind(this); 
    } 
    onClick(e) { 
     var circle = document.createElement('div'); 
     e.target.appendChild(circle); 
     var d = Math.max(e.target.clientWidth, e.target.clientHeight); 
     circle.style.width = circle.style.height = d + 'px'; 
     var rect = e.target.getBoundingClientRect(); 
     circle.style.left = e.clientX - rect.left -d/2 + 'px'; 
     circle.style.top = e.clientY - rect.top - d/2 + 'px'; 
     circle.classList.add('ripple'); 

     this.props.onClick(); 
    } 
    render() { 
    return (
     <Button 
     className={this.props.className} 
     type={this.props.type} 
     color={this.props.color} 
     size={this.props.size} 
     onClick={this.onClick} 
     > 
     {this.props.children} 
     </Button> 
    ); 
    } 
} 

export default NanoButton; 

Comme vous pouvez le voir, j'ai besoin NanoButton composant pour effectuer certaines activités personnalisées avant d'exécuter la fonction onClick qui lui a été transmise en tant que prop. Mais lors du chargement dans le navigateur, il échoue à this.props.onClick(); en disant qu'il ne peut pas lire onClick on undefined? Que pourrais-je manquer ici?

Answer 1

Votre méthode onClick n'est pas liée à votre contexte de classe et n'a donc pas accès à this.props.

La solution habituelle est de lier cette méthode dans votre constructeur:

constructor(props) { 
    super(props); 
    this.onClick = this.onClick.bind(this); 
} 

Une autre option consiste à lier dans le render comme il a été suggéré, mais cela signifie que la liaison se fera à chaque rendu, au lieu de n'utiliser qu'une seule fois la solution du constructeur.

Answer 2

si vous voulez oublier quand lier ou non vos méthodes que vous pouvez remplacer le style suivant:

onClick(e) { 

} 

avec:

onClick = (e) => { 
    this.props.onClick(); 
} 

et la fonction de flèche lier automatiquement tout pour vous , vous n'avez pas besoin de modifier votre code uniquement de la façon dont vous définissez ces méthodes.

La raison de l'erreur onClick on undefined est que, en effet, onClick est défini dans la portée de l'élément Dom qui n'a pas la définition de la méthode onClick.

Answer 3

Cela se produit lorsque this ne définit pas la fonction contexte, donc pour résoudre ce Il vous suffit de lier cette action, donc pour le faire, vous pouvez lier ce soit dans votre méthode constructeur ou vous pouvez lier directement cela avec la fonction chaque fois qu'elle est passée comme accessoire dans la fonction de rendu.

Reliure directement dans le constructeur

constructor(props){ 
super(props); 
this.onClick = this.onClick.bind(this); 
} 

En passant comme un des accessoires: -

<Button onClick={this.onClick.bind(this)/>