我有一个子组件，pageChange当我按下2分页栏中的按钮时，该子组件会触发功能：
import React from "react";
import "antd/dist/antd.css";
import { Pagination } from "antd";
const Child = props => {
function pageChange(pageNumber) {
props.pageChange(pageNumber);
console.log("Page child: ", pageNumber);
}
return (
<div>
<Pagination
defaultCurrent={1}
total={50}
onChange={pageChange}
/>
</div>
);
};
export default Child;
此子级在Parent类组件中使用：
import React, { Component } from "react";
import Child from "./Child";
class Parent extends Component {
state = {
pageIndex: 3
};
componentDidMount() {
this.getSetData(this.state.pageIndex);
}
getSetData(pageNumber) {
this.setState({
pageIndex: 5
});
console.log("Page state: ", this.state.pageIndex);
console.log("pageNumber: ", pageNumber);
}
pageChange(pageNumber) {
console.log("Page parent: ", pageNumber);
this.getSetData(pageNumber);
}
render() {
return (
<div className="container">
<Child pageChange={this.pageChange} />
</div>
);
}
}
export default Parent;
但是我有麻烦：
2按钮时，我得到一个错误this.getSetData is not a function。如何调用getSetData从pageChange？this.setState({pageIndex: 9});期间声明不起作用componentDidMount。为什么？解决了
this。所以必须使用pageChange = pageNumber => {
this.getSetData(pageNumber);
};
代替
pageChange(pageNumber) {
this.getSetData(pageNumber);
}
setState 是异步的，因此查看控制台中的更改对于从 render render() {
console.log("render ", this.state.pageIndex);
return (
<div className="container">
<Child pageChange={this.pageChange} />
</div>
);
}
使用ES6函数可以是一个简单的解决方案。所以你不需要在构造函数中绑定它
getSetData = (pageNumber) => {
this.setState({
pageIndex: 5
});
console.log("Page state: ", this.state.pageIndex);
console.log("pageNumber: ", pageNumber);
}
编辑1
尝试像这样使用您的子组件。
<Child pageChange={() => this.pageChange()} />
编辑2
<Child pageChange={(e) => this.pageChange(e)} />
您没有将参数传递给pagechange函数，这就是为什么它什么也没收到的原因。
试试这个，它肯定会工作。我已经在您的代码中对此进行了测试。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句