React Context - 在消费者内部使用 onClick 设置状态

Question

I have implemented React Context API and I am trying to update the state defined inside the Provider via an onClick function inside a child component.

This is what I have done so far, in the App.js I have:

import { createContext } from 'react';
const MyContext = React.createContext();
export class MyProvider extends Component {
    state = {
        currPrj: ''
    }

    handleBtnClick = prjCode => {

        this.setState({
            currPrj: prjCode
        })

    }

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

export const MyComsumer = MyContext.Consumer;

Inside my child component I have:

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { MyComsumer } from "../../index";

export class ProjectCard extends Component {

  constructor(props) {
    super(props);

    this.state = {
      // currPrj: ''
    };
  }

  render() {
    return (
      <MyComsumer>
        {(context) => (
          <div className="card card-project">
          <p>{context.state.currPrj}</p>
            <div className="content">
              <div className="author">
                <Link to={ `projects/${this.props.code}/detail/info` } onClick={() => handleBtnClick(this.props.code) }>
                  <h4 className="title">
                    {this.props.title}
                  </h4>
                </Link>
              </div>
          </div>
        )}
      </MyComsumer>
    );
  }
}

export default ProjectCard;

This way I get the following error

Failed to compile
./src/components/ProjectCard/ProjectCard.jsx
  Line 32:  'handleBtnClick' is not defined  no-undef

Search for the keywords to learn more about each error.

I don't get it why, because:

<p>{context.state.currPrj}</p>

throws no error...

Plus, is this.props.code passed correctly to the function?

Many thanks.

Answer 1

There is linter error because handleBtnClick is not defined. It's a method of another class, not standalone function.

It's not available in the scope of context consumer function. If consumers are supposed to update the context, updater function should be a part of the context:

<MyContext.Provider value={{
    state: this.state,
    update: this.handleBtnClick
}}>

And used like:

context.update(this.props.code)

Answer 2

you can follow this:

My Fiddle: https://jsfiddle.net/leolima/ds0o91xa/1/

 class Parent extends React.Component { sayHey(son) { alert('Hi father, this is son '+son+' speaking'); } render() { const children = React.Children.map(this.props.children, (child, index) => { return React.cloneElement(child, { someFunction: () => this.sayHey(index) }); }); return (<div> <b>Parent</b> <hr /> {children} </div>); } } class Child extends React.Component { render() { return <div> <button onClick={() => this.props.someFunction()}>Child</button> </div>; } } ReactDOM.render( <Parent> <Child /> <Child /> </Parent>, document.getElementById('container') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="container"> </div>