Réagir setState entre les composants ES6

J'ai une application très simple où je suis en train de mettre à jour l'état d'un composant parent d'un enfant de composant comme suit:

import React from '../../../../../../../dependencies/node_modules/react';
import ReactDOM from '../../../../../../../dependencies/node_modules/react-dom';

class CalendarMain extends React.Component {
    constructor() {
        super();
    }

    handleClick() {
        this.props.handleStateClick("State Changed");
    }

    render() {
        return ( 
            <div>
                <div className="calendar">
                    {this.props.checkIn}
                    <button onClick={ this.handleClick.bind(this) }>Click Me</button>
                </div>
            </div>
        )
    }
}

class CalendarApp extends React.Component {

    constructor() {
        super();

        this.state = { 
            checkIn: "Check-in",
            checkOut: "Check-out",
            dateSelected: false 
        };
    }

    handleStateClick( newState ) {
        this.setState({
            checkIn: newState
        });
    }

    render() {

        return (
            <div>
                <CalendarMain 
                    checkIn = { this.state.checkIn }
                    handleStateClick = { this.handleStateClick.bind(this) }
                />
            </div>
        );
    }
}

L'erreur que je reçois est this.setState is not a function et je ne peux pas savoir pourquoi. Toute aide serait grandement appréciée!

  • Assurez-vous que vous n'êtes pas accidentellement la mutationthis.setState ailleurs. c'est à dire: this.setState = { foo: 'bar' };
  • Juste remarquer le ../../..... assurez-vous que le chemin d'accès relatif des séjours au sein de votre projet, autrement déplacer le projet (téléchargement à distance, l'affichage sur github / mnp, peu importe) pourraient briser ces chemins.
  • Vous pouvez vouloir reconsidérer la hiérarchie du projet
  • La façon dont vous êtes l'importation de Réagir est très... décevant.
  • Il fonctionne avec la dernière version de Réagir: jsfiddle.net/1uh9e8wx
InformationsquelleAutor Tom Pinchen | 2016-06-13
  1. 7

    this n'est pas auto-lié dans l'ES6 la syntaxe de style.

    Soit:

    1. Lier dans le constructeur de la sorte: this.func = this.func.bind(this)
    2. Utiliser la flèche en fonction de la syntaxe de la fonction en question de la sorte: func = () => {};

    Plus ici: https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding

    • MDN documentation sur la flèche fonctions (lambda) pour plus de référence
    • L'OP semble lier déjà: handleStateClick = { this.handleStateClick.bind(this) }.
    InformationsquelleAutor pmilla1606
  2. 5

    Utilisation () => lambda pour fournir une portée lexicale et lier la valeur correcte de ce à l'intérieur de la méthode handleStateClick():

    handleStateClick = () => {
  this.setState({
    checkIn: newState
  });
}
    • Vous pourriez expliquer que cette fonctionnalité est expérimentale et qui Babel transforme à inclure pour faire ce travail.
    • En supposant que l'opération est déjà en utilisant ES6 classes et à l'importation, on peut présumer qu'ils ont tous le préalable à la configuration de l'environnement de
    • Semble être un peu exagéré... savez-vous que c'est une proposition et non une partie de l'ES6?
    • Je pense que c'est une partie de l'ES6 comme indiqué ici: ecma-international.org/ecma-262/6.0/.... Peut-être que je manque quelque chose et que vous pouvez m'indiquer quelques ressources pour ce que vous expliquez. Si vous faites référence à l'utilisation de transpilers, je pense que l'OP a mettre en place que déjà
    • La syntaxe que vous suggérant d'utiliser semble être github.com/jeffmo/es-class-fields-and-static-properties . C'est actuellement l'étape 1 de la proposition, de sorte que le plugin correspondant ou de présélection doit être ajouté pour permettre cela.
    InformationsquelleAutor Aditya Singh