React Context - setState with onClick inside Consumer

Question

我已经实现了 React Context API，我正在尝试通过子组件内的 onClick 函数更新 Provider 内定义的状态。

这是我到目前为止所做的，在 App.js 我有：

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;

在我的 子组件中 我有：

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;

这样我得到以下错误

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.

我不明白为什么，因为：

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

没有抛出错误...

另外，this.props.code 是否正确传递给函数？

非常感谢。

Answer 1

由于 handleBtnClick 未定义，因此出现 linter 错误。这是另一个 class 的方法，不是独立函数。

它在上下文消费者功能的范围内不可用。如果消费者应该更新上下文，更新函数应该是上下文的一部分：

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

并像这样使用：

context.update(this.props.code)

Answer 2

你可以关注这个：

我的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>

React Context - setState with onClick inside Consumer

React Context - setState with onClick inside Consumer

javascript

reactjs

react-context