web-dev-qa-db-fra.com

Comment mettre à jour la valeur de contexte dans le fournisseur à partir du consommateur

MyContext.js  

import React from "react";

const MyContext = React.createContext('test');
export default MyContext;

Créé un fichier js distinct du contexte où je peux accéder à mon parent ainsi qu'à mon composant enfant

Parent.js  

import MyContext from "./MyContext.js";
import Child from "./Child.js";

class Parent extends Component {

    constructor(props) {
      super(props);
      this.state = {
        Message: "Welcome React",
        ReturnMessage:""
      };
    }

    render() {
        return (
           <MyContext.Provider value={{state: this.state}}>      
              <Child /> 
           </MyContext.Provider>
       )
    }
}

Donc créé un composant parent, avec contexte fournisseur et appelant composant enfant dans l'onglet fournisseur

Child.js 

import MyContext from "./MyContext.js";

class Child extends Component {

    constructor(props) {
      super(props);
      this.state = {        
        ReturnMessage:""
      };
    }

    ClearData(context){
        this.setState({
           ReturnMessage:e.target.value
        });
        context.state.ReturnMessage = ReturnMessage
    }

    render() {
        return (
           <MyContext.Consumer>                 
              {(context) => <p>{context.state.Message}</p>}
              <input onChange={this.ClearData(context)} />
           </MyContext.Consumer>
       )
    }
}

Ainsi, dans enfant en utilisant consommateur peut afficher la partie de rendu dans enfant .. 

Je suis confronté à mettre à jour de consommateur à État fournisseur.

Comment mettre à jour l'état du fournisseur ou manipuler l'état du fournisseur? 

javascriptreactjsreact-context
7
Nowshad Syed

Tout d'abord, pour mettre à jour le contexte à partir du consommateur, vous devez accéder au contexte en dehors de la fonction de rendu. Pour plus d'informations sur cette opération, cochez 

Accès au contexte de réaction en dehors de la fonction de rendu

Deuxièmement, vous devez fournir un gestionnaire de fournisseur qui met à jour la valeur de contexte et non le muter directement. Votre code ressemblera à

Parent.js

import MyContext from "./MyContext.js";
import Child from "./Child.js";

class Parent extends Component {

    constructor(props) {
      super(props);
      this.state = {
        Message: "Welcome React",
        ReturnMessage:""
      };
    }

    updateValue = (key, val) => {
       this.setState({[key]: val});
    }
    render() {
        return (
           <MyContext.Provider value={{state: this.state, updateValue: this.updateValue}}>      
              <Child /> 
           </MyContext.Provider>
       )
    }
}

Enfant

import MyContext from "./MyContext.js";

class Child extends Component {

    constructor(props) {
      super(props);
      this.state = {        
        ReturnMessage:""
      };
    }

    ClearData(e){
        const val = e.target.value;
        this.setState({
           ReturnMessage:val
        });
        this.props.context.updateValue('ReturnMessage', val);
    }

    render() {
        return (
           <React.Fragment>
             <p>{this.props.context.state.Message}</p>}
             <input onChange={this.ClearData} />
           </React.Fragment>
       )
    }
}

const withContext = (Component) => {
   return (props) => {
       <MyContext.Consumer>    
            {(context) => {
               return <Component {...props} context={context} />
            }}
       </MyContext.Consumer>
   }
}

export default withContext(Child);
4
Shubham Khatri

Vous devez écrire une fonction dans le composant Fournisseur pour mettre à jour l'état . Pour être exact, le consommateur ne peut utiliser que les valeurs et les fonctions que vous avez écrites dans le composant Fournisseur.

Dans la composante parent

updateReturnMessage = (ReturnMessage) => {
  this.setState((prevState) => ({ ...prevState, ReturnMessage }))
}

<MyContext.Provider value={{ state: this.state, updateReturnMessage: this.updateReturnMessage }}>
// your code goes here
</MyContext.Provider>

En composante enfant:

ClearData(e){
  const val = e.target.value;
  this.context.updateReturnMessage(val);
}

Cette fonction est similaire au action creators disponible dans Redux et flux

0
Ram Kumar Parthiban