如何从使用者更新提供者中的上下文值 [英] How to update the Context value in Provider from the Consumer

问题描述

MyContext.js

import React from "react";

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

创建了一个上下文分离的js文件，我可以在其中访问我的父级和子级组件

Created A context separate js file where i can access in my parent as well as my child component

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>
       )
    }
}

因此创建了一个具有提供程序上下文的父组件，并在提供程序选项卡中调用了子组件

So created a parent component, with Provider context and calling child component in provider tab

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>
       )
    }
}

因此通过使用消费者的in child可以显示in child渲染部分.

So in child by using consumer can display the in child render part..

我正面临从消费者到提供商状态的更新.

I'm facing to update from consumer to provider state.

如何更新提供程序状态或操纵提供程序状态..

How to update provider state or manipulate state of provider ..

推荐答案

首先，为了从使用者那里更新上下文，您需要在render函数之外访问上下文，有关如何执行此操作的详细信息，请检查

Firstly, in order to update the context from the consumer, you need to access the context outside of the render function, For details on how to do this, check

在渲染函数之外访问React Context

第二，您应该从Provider提供一个处理程序，该处理程序将更新上下文值，而不是直接对其进行突变.您的代码看起来像

Secondly, you should provide a handler from Provider which updates the context value and not mutate it directly. Your code will look like

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>
       )
    }
}

孩子

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);

这篇关于如何从使用者更新提供者中的上下文值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！