web-dev-qa-db-fra.com

Réagissez: les enfants cliquent pour modifier l'état du parent pour le rendu

Je suis vraiment nouveau avec React. J'essaye d'obtenir le parent pour changer la page affichée selon les états. J'ai un bouton dans mon sous-composant qui devrait envoyer "vrai" ou "faux" au composant parent afin qu'il sache s'il faut le rendre ou non. Je pense que cela devrait être fait avec des accessoires comme celui-ci:

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

Mais je ne le fais pas fonctionner. Pourriez-vous donner des conseils? Voici le parent à part entière - 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;
reactjscomponents
9
Jack M.

Ce que vous devez faire est de passer une méthode du parent à l'enfant, qu'elle peut appeler lorsque vous cliquez sur le bouton. Cette méthode qui appartient au parent changera l'état.
Dans MainPage.js

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

passez cette méthode à votre composant enfant en tant que
<Mainpage_Addscreen buttonClick={this.changeButtonState.bind(this)} />

et enfin dans le composant enfant,
<Button .... onClick={this.props.buttonClick} />

20
Jeff P Chacko

Ce dont vous avez probablement besoin, c'est d'une fonction de rappel, que votre parent passe comme accessoire à votre enfant, et que votre enfant peut ensuite appeler.

Quelque chose comme ça:

// 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 remarque que vous avez un composant <Button> Capitalisé. Il s'agit généralement des composants que vous avez définis vous-même. Les éléments DOM standard prennent en minuscules, par exemple <div>, <p> Etc.

5
wintvelt