tipos - pasar parametros a una funcion javascript desde html

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

Question

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.handleInputChange a, por ejemplo, setTimeout , se aplicaría a la instancia de clase, y no al objeto de window .

Answer 1

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

Answer 2

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 .bind en un método prototipo:

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

Hay una proposal que podría permitirle omitir el constructor() y colocar directamente la asignación en el ámbito de la clase con la misma funcionalidad, pero no recomendaría usarla 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 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);
  }
}

Answer 3

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

Answer 4

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. Necesitará habilitar funciones experimentales en Babel para que esto se compile. Here hay una demostración con experimental habilitado.

Para usar funciones experimentales en babel, puede instalar el complemento correspondiente desde here . Para esta característica 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 here