javascript - React Context - setState 与消费者内部的 onClick
问题描述
我已经实现了 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是否正确传递给函数?
非常感谢。
解决方案
你可以按照这个:
我的小提琴: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>
推荐阅读
- google-apps-script - 谷歌表多选下拉脚本
- android - AndroidTest org.koin.core.error.NoBeanDefFoundException:找不到类的定义
- python - Plotly 将导出导出到 for 循环内的 png
- android - RuntimeException 导致 Android 上的 ANR
- android - 从themes.xml 更改TopAppBar 背景颜色
- gitlab-ci-runner - 如何在管道中自动重启机器后连接回 gitlab -runner?
- javascript - jquery的交叉口观察者
- html - 我的网页内容一直与我的背景图片幻灯片重叠,我已经尽我所能来解决这个问题
- c# - 如何迭代文件夹下的所有文件,但我不想迭代一些特殊的子文件夹?
- git - 如何在 Github 的两个分支中指向同一个提交?