Javascript Girl
  1. Javascript Girl
  3. Comment utiliser les fonctions de flèche (champs de classe publique) en tant que méthodes de classe?
Intereting Posts
Comment modifier l'image d'arrière-plan via la balise "sélectionnée" Fullcalendar – Enregistrer les événements dans la base de données Boîte de délimitation de transformation dans Paper.js Qunit a paramétré les tests et se moque JQuery Keypress Touches de navigation Tabulation Angularjs Chargement du spinner pendant le rendu Socket.IO ne peut pas se connecter via https JQuery et validez le plugin – comment ajouter un message promotionnel sur submit Barre de recherche qui masque les résultats qui ne l'ont pas tapé Comment accéder au fichier en javascript? Comment extraire la valeur d'un tableau de tableau Convertir chaîne (était une fonction) revenir à la fonction en Javascript En utilisant jQuery, le réglage Draggable sur un élément empêche le flou de tirer lorsque vous cliquez sur l'élément de dragage Chargez le profil de membre LinkedIn en insérant javascript avec Jquery AngularJS: $ regarder pour une entrée sélectionnée

Comment utiliser les fonctions de flèche (champs de classe publique) en tant que méthodes de classe?

Je suis nouveau dans l'utilisation des classes ES6 avec React, j'ai précédemment lié mes méthodes à l'objet actuel (montrer dans le premier exemple), mais ES6 me permet-il de lier de façon permanente une fonction de classe à une instance de classe avec des flèches? (Utile lors du passage en tant que fonction de rappel). J'ai des erreurs lorsque j'essaie de les utiliser comme vous le pouvez avec CoffeeScript: 

class SomeClass extends React.Component { // Instead of this constructor(){ this.handleInputChange = this.handleInputChange.bind(this) } // Can I somehow do this? Am i just getting the syntax wrong? handleInputChange (val) => { console.log('selectionMade: ', val); }

Donc, si je devais passer SomeClass.handleInputChange à, par exemple setTimeout , il serait étendu à l'instance de classe, et non à l'objet de window .

    Votre syntaxe est légèrement désactivée, il manque simplement un signe égal après le nom de la propriété. 

     class SomeClass extends React.Component { handleInputChange = (val) => { console.log('selectionMade: ', val); } }

    C'est une caractéristique expérimentale. Vous devrez activer les fonctionnalités expérimentales de Babel pour que cela compile. Voici une démo avec expérimenté activé.

    Pour utiliser les fonctionnalités expérimentales dans babel, vous pouvez installer le plugin pertinent à partir d' ici . Pour cette fonctionnalité spécifique, vous avez besoin du plugin de transform-class-properties : 

     { "plugins": [ "transform-class-properties" ] }

    Vous pouvez en savoir plus sur la proposition pour les champs de classe et les propriétés statiques ici

    Non, si vous souhaitez créer des méthodes liées, spécifiques à l'instance, vous devrez le faire dans le constructeur. Cependant, vous pouvez utiliser des fonctions de flèche pour cela, au lieu d'utiliser .bind sur une méthode prototype: 

     class SomeClass extends React.Component { constructor() { super(); this.handleInputChange = (val) => { console.log('selectionMade: ', val, this); }; … } }

    Il existe une proposition qui pourrait vous permettre d'omettre le constructor() et de mettre directement l'affectation dans la portée de la classe avec la même fonctionnalité, mais je ne recommanderais pas d'utiliser cela car il est très expérimental.

    Alternativement, vous pouvez toujours utiliser .bind , ce qui vous permet de déclarer la méthode sur le prototype, puis de le lier à l'instance dans le constructeur. Cette approche offre une plus grande flexibilité car elle permet de modifier la méthode de l'extérieur de votre classe. 

     class SomeClass extends React.Component { constructor() { super(); this.handleInputChange = this.handleInputChange.bind(this); … } handleInputChange(val) { console.log('selectionMade: ', val, this); } }

    La question est tout prêt, mais j'ajoute ici quelques cas d'utilisation pour utiliser la méthode de flèche ES6.

    Méthodes de rappel internes: 

      let arr = [1,2]; let arr1 = arr.map((val,index)=>{ return val*2 })

    ou, 

     let arr1 = arr.map(val=>{ // if one argument than no need of using () return val*2 })

    Remarque: dans la fonction callabck interne, si this est utilisé, ici se réfère à la fonction callback au lieu de la classe component.

    Ex: 

      arr.map(function(val){ this.func(val);//Will not work }); arr.map((val,index)=>{ this.func();//Will work })

    Je sais que cette question a été suffisamment répondu, mais j'ai simplement une petite contribution à apporter (pour ceux qui ne veulent pas utiliser la fonctionnalité expérimentale). En raison du problème d'avoir à lier plusieurs fonctions se lient dans le constructeur et en faisant paraître désordonné, je suis venu avec une méthode d'utilité qui, une fois liée et appelée dans le constructeur, effectue toutes les liaisons de méthodes nécessaires pour vous automatiquement.

    Supposons que j'ai cette classe avec le constructeur: 

     //src/components/PetEditor.jsx import React from 'react'; class PetEditor extends React.Component { constructor(props){ super(props); this.state = props.currentPet || {tags:[], photoUrls: []}; this.tagInput = null; this.htmlNode = null; this.removeTag = this.removeTag.bind(this); this.handleChange = this.handleChange.bind(this); this.modifyState = this.modifyState.bind(this); this.handleKeyUp = this.handleKeyUp.bind(this); this.addTag = this.addTag.bind(this); this.removeTag = this.removeTag.bind(this); this.savePet = this.savePet.bind(this); this.addPhotoInput = this.addPhotoInput.bind(this); this.handleSelect = this.handleSelect.bind(this); } ...//actual method declarations omitted }