web-dev-qa-db-fra.com

Comment passer l'état au parent dans React?

J'ai un formulaire avec un bouton d'envoi. Ce formulaire appelle une fonction onclick qui définit l'état de quelque chose de faux à vrai. Je veux ensuite transmettre cet état au parent afin que s'il est vrai, il rend le composant A, mais s'il est faux, il rend le composantB.

Comment pourrais-je faire cela en réaction? Je sais que je dois utiliser l'état ou les accessoires, mais je ne sais pas comment le faire. cela contredit-il également le principe de réaction à sens unique?

ComposantA code:

<form onSubmit={this.handleClick}>


handleClick(event) {
    this.setState({ decisionPage: true });
    event.preventDefault();
  };

Composant parent qui contrôle ce qu'il affiche:

return (
      <div>
      {this.props.decisionPage ?
        <div>
          <LoginPage />
        </div>
        :
        <div>
          <Decision showThanks={this.props.showThanks}/>
        </div>
      }
      </div>
    )
javascriptreactjsreact-state-management
18
The worm

Déplacez handleClick vers le parent et passez-le au composant enfant comme accessoire.

<LoginPage handleClick={this.handleClick.bind(this)}/>

Maintenant dans le composant enfant:

<form onSubmit={this.props.handleClick}>

De cette façon, la soumission du formulaire mettra à jour directement l'état du composant parent. Cela suppose que vous n'avez pas besoin d'accéder à la valeur d'état mise à jour dans le composant enfant. Si vous le faites, vous pouvez alors retransmettre la valeur d'état du parent à l'enfant comme accessoire. Le flux de données à sens unique est maintenu.

<LoginPage  handleClick={this.handleClick.bind(this)} decisionPage={this.state.decisionPage}/>
33
Rami Enbashi

Voici un exemple de la façon dont nous pouvons transmettre des données de l'enfant au parent (j'ai eu le même problème et utiliser le sortir avec cela)

Sur le parent, j'ai une fonction (que j'appellerai d'un enfant avec des données pour ça)

handleEdit(event, id){ //Fuction
    event.preventDefault();  
    this.setState({ displayModal: true , responseMessage:'', resId:id, mode:'edit'});  
 } 

dishData = <DishListHtml list={products} onDelete={this.handleDelete} onEdit={(event, id) => this.handleEdit(event, id)}/>;

Au niveau du composant enfant:

<div to="#editItemDetails" data-toggle="modal" onClick={(event)=>this.props.onEdit(event, listElement.id) }
                        className="btn btn-success">
3
Abhinav bhardwaj

Étapes simples:

  1. Créez un composant appelé Parent.
  2. Dans le composant parent, créez une méthode qui accepte certaines données et définit les données acceptées comme état du parent.
  3. Créez un composant appelé Child.

  4. Passez la méthode créée dans Parent à enfant sous la forme props.

  5. Acceptez les accessoires du parent à l'aide de this.props suivi du nom de la méthode et lui passer l'état d'enfant comme argument.

  6. La méthode remplacera l'état du parent par l'état de l'enfant.
1
Aftab22

Dans React vous pouvez transmettre des données du parent à l'enfant à l'aide d'accessoires. Mais vous avez besoin d'un mécanisme différent pour transmettre les données de l'enfant au parent.

Une autre méthode consiste à créer une méthode de rappel. Vous passez la méthode de rappel à l'enfant lors de sa création.

class Parent extends React.Component {
myCallback = (dataFromChild) => {
    //use dataFromChild
},
render() {
    return (
        <div>
             <ComponentA callbackFromParent={this.myCallback}/>
        </div>
    );
  }
}

Vous transmettez la valeur decisionPage de l'enfant au parent via la méthode de rappel passée par le parent.

     class ComponentA extends React.Component{
          someFn = () => {
            this.props.callbackFromParent(decisionPage);
          },
          render() {
            [...]
          }
     };

SomeFn pourrait être votre méthode handleClick.

1
Daneesha