¿Cómo usar las funciones de flecha (campos de clase pública) como métodos de clase?

Soy nuevo en el uso de clases ES6 con React, anteriormente he estado vinculando mis métodos al objeto actual (mostrar 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.handleInputChangea, por ejemplo setTimeout, se limitaría a la instancia de clase, y no al windowobjeto.

Su sintaxis está ligeramente apagada, 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 característica específica, necesita el transform-class-propertiescomplemento :

{
  "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 instancia, deberá hacerlo en el constructor. Sin embargo, puede usar funciones de flecha para eso, en lugar de usar .bindun 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 constructor()y colocar directamente la asignación en el alcance de la clase con la misma funcionalidad, pero no recomendaría usarla ya que es altamente experimental.

Alternativamente, siempre puede usar .bind, lo que le permite declarar el método en el prototipo y luego vincularlo a la instancia en el constructor. Este enfoque tiene una mayor flexibilidad ya que permite modificar el método desde el exterior 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 que hacer una pequeña contribución (para aquellos que no quieren usar la función experimental). Debido al problema de tener que vincular enlaces de múltiples funciones en el constructor y hacer que se vea desordenado, se me ocurrió un método de utilidad que una vez vinculado y llamado en el constructor, realiza automáticamente todos los enlaces de métodos necesarios para usted.

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 tengo que 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);
    }
    // ...
}

Está utilizando la función de flecha y también la vincula en el constructor. Por lo tanto, no necesita vincular cuando usa las funciones de flecha

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

O necesita vincular una función solo en el constructor cuando usa la función normal como se muestra a continuación

class SomeClass extends React.Component {
   constructor(props){
      super(props);
      this.handleInputChange = this.handleInputChange.bind(this);
   }

  handleInputChange(val){
    console.log('selectionMade: ', val);
  }
}

Tampoco se recomienda vincular una función directamente en render. Siempre debe estar en constructor