Réagir: les Enfants onclick pour changer de parent de l'etat pour le re-rendu

Je suis vraiment nouveau à réagir. J'essaye de prendre le parent de changer la page affichée selon les états. J'ai un bouton dans mon sous-composant qui doit envoyer à "true" ou "false" pour le composant parent de sorte qu'il sait si pour la rendre ou pas. Je pense que cela devrait être fait avec des accessoires comme ceci:

this.state = {
   btnNewScreen: this.props.btnNewScreen //true or false
};

Mais je ne suis pas à la faire fonctionner. Pourriez-vous nous donner quelques conseils? Ici, c'est la pleine parent - enfant

parent - maindisplay.js

import React from 'react';
import Mainpage_Addscreen from '../components/subcomponents/mainpage-addscreen';
import Mainpage_Showscreens from '../components/subcomponents/mainpage-showscreens';
//
class MainDisplay extends React.Component {
    constructor() {
        super();
        this.state = {
            btnNewScreen: false //should be this.props.btnNewScreen?
        };
    }

    render() {
        var renderThis;
        if (!this.state.btnNewScreen) {
            renderThis =
                <div>
                    <Mainpage_Addscreen />
                    <Mainpage_Showscreens />
                </div>
        }
        else {
            //renderThis = <AddScreen />
            renderThis =
                <div>
                    <Mainpage_Addscreen />
                    <h3>Change to this when true (button click)</h3>
                </div>
        }
        return (
            <div>
                {renderThis}
            </div>
        );
      }
    }


    export default MainDisplay;

enfant - mainpage-addscreen.js

import React from 'react';

import Glyphicon from 'react-bootstrap/lib/Glyphicon';
import Button from 'react-bootstrap/lib/Button';

class Mainpage_Addscreen extends React.Component {
    constructor() {
        super();
        this.state = {
            btnNewScreen: true
        };
        this.newScreen = this.newScreen.bind(this);
    }

    newScreen(e) {
        this.setState({ btnNewScreen: !this.state.btnNewScreen });
        console.log(this.state.btnNewScreen);
    }
    render() {
        var text = this.state.btnNewScreen ? 'Add new' : 'Screens';
        return (
            <div className="main_window col-sm-offset-1 col-sm-10">
                <h3 id="addscreens">Screens: </h3>
                <Button id="addScreen" className="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" onClick={this.newScreen}><Glyphicon id="refresh_screens" glyph="plus" />&nbsp; {text}</Button>
            </div>
        );
    }
}


export default Mainpage_Addscreen;

OriginalL'auteur Jack M. | 2016-08-11

  1. 18

    Ce que vous devez faire est de passer d'une méthode à partir de la mère à l'enfant, Qu'il puisse appeler lorsque le bouton est cliqué. Cette méthode qui appartient à la mère va changer l'état.

    Dans MainPage.js 

    changeButtonState(event) {
    this.setState({btnNewScreen: !this.state.btnNewScreen})
}

    passer de cette méthode à votre enfant composant comme

    <Mainpage_Addscreen buttonClick={this.changeButtonState.bind(this)} />

    et enfin dans le composant enfant,

    <Button .... onClick={this.props.buttonClick} />

    Cela m'a aidé à comprendre un peu mieux et il a obtenu de travailler. Merci!

    OriginalL'auteur Jeff P Chacko

  2. 3

    Ce que vous avez probablement besoin est une fonction de rappel, votre parent passe comme un accessoire pour votre enfant, et que votre enfant peut ensuite appeler.

    Quelque chose comme ceci:

    //In parent
constructor() {
  ...
  this.onChildClicked = this.onChildClicked.bind(this);
}

onChildClicked() {
  this.setState({childWasClicked : True });
}

render() {
  ...
  return (
    <div>
      <Child onClicked={this.onChildClicked} />
    </div>
  )
}

//In child
render() {
  ...
  return (
    <div>
      <button onClick={this.props.onClicked} />
    </div>
  )
}

    PS: je note que vous avez une majuscule <Button> composant. C'est typiquement pour les composants que vous avez défini vous-même. Standard des éléments du DOM prendre en minuscules, par exemple <div>, <p> etc

    Ils ont en particulier un <Button> parce qu'ils sont de l'importation du fichier d'amorce composant Bouton de réagir-bootstrap.
    Je pense que vous n'avez pas besoin de les crochets sur onChildClicked() pensez-vous?
    Je crois que cela doit être: // parent onChildClicked() { this.setState({childWasClicked : True }); } render() { ... return ( <div> <Enfant onClicked={présent.onChildClicked} /> </div> ) } // Pour enfant render() { ... return ( <div> <button onClick={présent.accessoires de jeu.onChildClicked} /> </div> ) }
    Merci pour les commentaires @Ray_Poly. Édité dans la réponse 😉

    OriginalL'auteur wintvelt