Soy nuevo en el uso de clases ES6 con React, anteriormente he estado vinculando mis métodos al objeto actual (se muestra en el primer ejemplo), pero ¿ES6 me permite vincular permanentemente una función de clase a una instancia de clase con flechas? (Útil cuando se pasa como una función de devolución de llamada). Recibo errores cuando trato de usarlos como puede con 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); } De modo que si tuviera que pasar SomeClass.handleInputChange a, por ejemplo, setTimeout , se limitaría a la instancia de la clase y no al objeto de la window .
Su sintaxis es ligeramente incorrecta, solo falta un signo igual después del nombre de la propiedad.
class SomeClass extends React.Component { handleInputChange = (val) => { console.log('selectionMade: ', val); } }Esta es una característica experimental. Deberá habilitar las funciones experimentales en Babel para que esto se compile. Aquí hay una demostración con experimental habilitado.
Para usar funciones experimentales en babel, puede instalar el complemento correspondiente desde aquí . Para esta función específica, necesita el complemento transform-class-properties :
{ "plugins": [ "transform-class-properties" ] }Puede leer más sobre la propuesta de Campos de Clase y Propiedades Estáticas aquí
No, si desea crear métodos vinculados específicos de la instancia, tendrá que hacerlo en el constructor. Sin embargo, puede usar funciones de flecha para eso, en lugar de usar .bind en un método prototipo:
class SomeClass extends React.Component { constructor() { super(); this.handleInputChange = (val) => { console.log('selectionMade: ', val, this); }; … } } Hay una propuesta que podría permitirle omitir el constructor() y colocar directamente la tarea en el ámbito de la clase con la misma funcionalidad, pero no recomendaría usar eso ya que es altamente experimental.
Alternativamente, siempre puede usar .bind , que le permite declarar el método en el prototipo y luego vincularlo a la instancia en el constructor. Este enfoque tiene mayor flexibilidad ya que permite modificar el método desde fuera de su clase.
class SomeClass extends React.Component { constructor() { super(); this.handleInputChange = this.handleInputChange.bind(this); … } handleInputChange(val) { console.log('selectionMade: ', val, this); } }Sé que esta pregunta ha sido suficientemente respondida, pero solo tengo una pequeña contribución que hacer (para aquellos que no quieren usar la función experimental). Debido al problema de tener que enlazar varias funciones en el constructor y hacer que se vea desordenado, se me ocurrió un método de utilidad que, una vez enlazado y llamado en el constructor, hace todos los enlaces de métodos necesarios automáticamente.
Supongamos que tengo esta clase con el constructor:
//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 }Se ve desordenado, ¿no? Ahora creé este método de utilidad.
//src/utils/index.js /** * NB: to use this method, you need to bind it to the object instance calling it */ export function bindMethodsToSelf(objClass, otherMethodsToIgnore=[]){ const self = this; Object.getOwnPropertyNames(objClass.prototype) .forEach(method => { //skip constructor, render and any overrides of lifecycle methods if(method.startsWith('component') || method==='constructor' || method==='render') return; //any other methods you don't want bound to self if(otherMethodsToIgnore.indexOf(method)>-1) return; //bind all other methods to class instance self[method] = self[method].bind(self); }); }Todo lo que necesito hacer ahora es importar esa utilidad y agregar una llamada a mi constructor, y ya no necesito vincular cada método nuevo en el constructor. El nuevo constructor ahora se ve limpio, así:
//src/components/PetEditor.jsx import React from 'react'; import { bindMethodsToSelf } from '../utils'; class PetEditor extends React.Component { constructor(props){ super(props); this.state = props.currentPet || {tags:[], photoUrls: []}; this.tagInput = null; this.htmlNode = null; bindMethodsToSelf.bind(this)(PetEditor); } // ... }