La création de fonctions personnalisées à Réagir composant

J'ai une Réagir la composante

export default class Archive extends React.Component { 
   ...
}

componentDidMount et onClick méthodes partiellement utiliser le même code, sauf pour un léger changement dans les paramètres.

Est-il possible de créer une fonction à l'intérieur de la classe component, de sorte qu'il peut être réutilisé dans le champ d'application de la composante?

InformationsquelleAutor Alexey | 2016-01-19
  1. 69

    Vous pouvez créer des fonctions de réagir composants. Il est en fait régulière ES6 classe qui hérite de React.Component. Il suffit de faire attention et de les lier au contexte dans onClick événement:

    export default class Archive extends React.Component { 

    saySomething(something) {
        console.log(something);
    }

    handleClick(e) {
        this.saySomething("element clicked");
    }

    componentDidMount() {
        this.saySomething("component did mount");
    }

    render() {
        return <button onClick={this.handleClick.bind(this)} value="Click me" />;
    }
}
    • Tellement simple... Merci!
    • vous êtes les bienvenus 🙂
    • Si vous souhaitez faire appel récursif de la fonction? Comment appelez-vous qu'au sein de la fonction?
    • aussi simple que de non-appel récursif, il suffit d'appeler la méthode/fonction this.myMethod()
    • Pour moi tout this.handleClick fonctionne pour moi d'appeler une fonction personnalisée définie dans mon réagir composant. Qu'est-ce que cette syntaxe supplémentaire .bind(this)? Pourquoi avons-nous besoin?
    • bien sûr, il va appeler la fonction. Le problème est que this à l'intérieur de la méthode ne sera pas ce que vous attendez. Voir plus à ce sujet ici stackoverflow.com/questions/33973648/...
    • Dans mon application je reçois ce que bind(this) ne doit pas être utilisé dans un JSX composant. une alternative à l'accès à la des accessoires à partir d'une fonction personnalisée sans liaison this contexte?
    • lier la fonction qu'une seule fois, dans le constructeur
    • Génial lah....

    InformationsquelleAutor madox2
  2. 15

    D'une autre manière:

    export default class Archive extends React.Component { 

  saySomething = (something) => {
    console.log(something);
  }

  handleClick = (e) => {
    this.saySomething("element clicked");
  }

  componentDidMount() {
    this.saySomething("component did mount");
  }

  render() {
    return <button onClick={this.handleClick} value="Click me" />;
  }
}

    Dans ce format, vous n'avez pas besoin d'utiliser bind

    InformationsquelleAutor yiwen
  3. 5

    Vous pouvez essayer cette.

    //Author: Hannad Rehman Sat Jun 03 2017 12:59:09 GMT+0530 (India Standard Time)

import React from 'react';
import RippleButton from '../../Components/RippleButton/rippleButton.jsx';

class HtmlComponents extends React.Component {

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

    rippleClickFunction(){
        //do stuff. 
        //foo==bar
    }

    render() {
      return (
         <article>
             <h1>React Components</h1>
             <RippleButton onClick={this.rippleClickFunction}/>
         </article>
      );
   }
}

export default HtmlComponents;

    Le seul souci est que vous devez lier le contexte de la fonction

    InformationsquelleAutor hannad rehman