Contexte de liaison lors de l'appel de la méthode ES6. Comment accéder à l'objet depuis la méthode appelée callback?

Je suis d'essayer d'envelopper ma tête autour de la syntaxe pour les Classes dans l'ES6. Alors que dans le même temps, l'apprentissage de Tissu natif par Bonnie Eisenman l'Apprentissage de Réagir Natif.

J'ai trouvé une question autour de l'accès à this dans un rappel, lorsque le rappel est une Classe de "méthode". Je suis conscient des enjeux autour lexicale this des rappels ont été soulevées à plusieurs reprises sur StackOverflow. Par exemple, dans
Comment accéder à la corriger " ce " contexte à l'intérieur d'un rappel?.

Basé sur mes recherches en ligne, j'ai trouver une solution. Mais je ne suis pas sûr que ce est la bonne façon de le faire dans l'ES6.

Mon problème est venu à propos, quand j'ai essayé ce qui suit ci-dessous:

class WeatherProject extends Component {
  constructor(props) {
    super(props);
    this.state = {
      zip: ''
    };
  }

  _handleTextChange(event) {
    console.log(event.nativeEvent.text);
    this.setState({zip: event.nativeEvent.text})
  }

  render() {
    return (
      <TextInput
        style={styles.input}
        onSubmitEditing={this._handleTextChange}/>
    );
  }
}

(Que je n'ai légèrement modifié à partir de l'exemple dans le livre pour correspondre à l'ES6 classe syntaxe et l'importation/l'exportation de la syntaxe au lieu de l'Exiger.)

Si je fais cela, le this dans _handleTextChange est pas défini (impossible de lire la propriété 'setState' undefined). J'ai été surpris par cela. En provenance d'autres langages à objets, je suis d'interprétation, comme si cette méthode se comporte plus comme si c'était une méthode statique.

J'ai été en mesure de résoudre ce problème en ignorant la méthode de la classe et à l'aide de la flèche de la notation. onSubmitEditing={event => this.setState({name: event.nativeEvent.text})}. Qui fonctionne très bien. Je n'ai pas de problèmes ou de confusion.

Je veux vraiment travailler comment appeler une méthode de classe. Après pas mal de recherche j'ai réussi à le faire fonctionner de la manière suivante: onSubmitEditing={this._handleTextChange.bind(this)}. Peut-être que j'ai mal compris l'un des aspects fondamentaux de JavaScript (je suis débutant en JS), mais cela semble complètement fou de moi. Est-il vraiment pas moyen d'accéder au contexte d'un objet à partir de l'intérieur d'une méthode sans explicitement la liaison de l'objet en arrière sur... sa propre méthode, au point où il est appelé?

J'ai aussi essayé d'ajouter var self = this; dans le constructeur et l'appel self.setState dans _handleTextChange. Mais n'est-ce pas trop surpris de trouver que cela ne fonctionnait pas.

Quelle est la manière correcte de l'accès d'un objet dans l'un de ses méthodes quand il est appelé comme un rappel?

source d'informationauteur rod

Réagir.createClass (ES5) de création de la classe a une fonctionnalité intégrée qui lie toutes les méthodes pour this automatiquement. Mais, tout en introduisant des classes dans l'ES6 et la migration de Réagir.createClass, Ils ont trouvé qu'il peut être un peu déroutant pour les développeurs JavaScript qui ne sont pas utilisés à cette fonction dans d'autres classes, ou il peut être source de confusion lorsqu'ils passent de Réagir à d'autres classes.

Alors, ils ont décidé de ne pas avoir cette intégrés dans Réagissent de classe du modèle. Vous pouvez toujours explicitement prebind méthodes dans votre constructeur si vous voulez

class WeatherProject extends Component {
  constructor(props) {
    super(props);
    this.state = {
      zip: ''
    };
    this._handleTextChange = this._handleTextChange.bind(this); //Binding to `this`
  }

  _handleTextChange(event) {
    console.log(event.nativeEvent.text);
    this.setState({zip: event.nativeEvent.text})
  }

Mais nous avons toujours un moyen simple pour éviter ce prebinding. Ouais! Vous l'avez. Flèche fonctions.

class WeatherProject extends Component {
  constructor(props) {
    super(props);
    this.state = {
      zip: ''
    };
  }

  _handleTextChange = event => {
    console.log(event.nativeEvent.text);
    this.setState({zip: event.nativeEvent.text})
  }

  render() {
    return (
      <TextInput
        style={styles.input}
        onSubmitEditing={this._handleTextChange}/>
    );
  }
}

BTW, Ce est tout au sujet de Réagir. ES6 classe a toujours un moyen d'accéder au contexte d'un objet à partir de l'intérieur d'une méthode sans explicitement la liaison de l'objet en arrière sur sa propre méthode.

class bindTesting {
  constructor() {
    this.demo = 'Check 1';
  }

  someMethod() {
    console.log(this.demo);
  }

  callMe() {
    this.someMethod();
  }
}

let x = new bindTesting();
x.callMe(); //Prints 'Check 1';

Mais ce n'est pas prints "Case 1" si nous l'appelons dans JSX Expression.

EDIT:: @Oka mentionné, flèche fonctions dans la classe des corps est ES7+ fonctionnalité et disponible dans le Compilateur/polyfills comme babel. Si vous n'utilisez pas transpiler qui prennent en charge cette fonctionnalité, On peut juste se lier à this comme mentionné ci-dessus ou d'écrire une nouvelle BaseComponent comme ceci ( Qui est une mauvaise idée )

class BaseComponent extends React.Component {
 _bind(...methods) {
  methods.forEach( (method) => this[method] = this[method].bind(this) );
 }
}

class ExampleComponent extends BaseComponent {
 constructor() {
  super();
  this._bind('_handleTextChange', '_handleClick');
 }
 //...
}

3

Peut-être que j'ai mal compris l'un des aspects fondamentaux de JavaScript (je suis débutant en JS), mais cela semble complètement fou de moi. Est-il vraiment pas moyen d'accéder au contexte d'un objet à partir de l'intérieur d'une méthode sans explicitement la liaison de l'objet en arrière sur... sa propre méthode, au point où il est appelé?

Bien, les "méthodes" ne sont pas appartenant par les objets en javascript. Toutes les fonctions sont des valeurs de première classe (objets), et non pas "partie" d'un objet ou d'une classe.

La liaison de la this valeur qui se passe lorsque la fonction est appelée, selon la façon dont la fonction est appelée. Un appel de fonction avec la méthode de notation a son this définie à l'objet de réception, un écouteur d'événement d'appel a ses this défini à la cible de l'événement, et une fonction normale d'appel a seulement undefined.

Si vous avez accès à une méthode sur une instance, c'est vraiment juste la norme prototype de l'héritage de l'accès à la propriété qui donne une fonction, qui est alors appelé et dynamiquement lié au récepteur.

Si vous voulez appeler une fonction d'une méthode sur un exemple, lorsqu'il est un écouteur d'événement, alors vous avez besoin de créer explicitement une fonction qui fait cela - la "liaison" de la méthode. Dans l'ES6, la flèche de la notation est généralement préféré pour cette.

Vous devez vous connecter pour publier un commentaire.