反应：无法将参数传递给提升事件处理程序

Question

我不能使用相同的事件处理程序将参数从子组件传递到父组件。

我的组件树遵循以下结构：

• 产品列表
  • 产品网格
  • 分页栏

在 ProducList 组件中，我有这个事件处理程序

handlePagination = (index) => { bla bla bla }
<PaginationBar
OnPagination={(index) => this.handlePagination(index)}
pages={this.state.pages}
/>

在分页栏中，当我呈现页面时。

render() {
return (
<nav aria-label="Catalog page navigation">
<ul className="pagination">
<li className={this.navButtonEnabled(0)} key="page-item-0">
<a
className="page-link"
onClick={this.props.OnPagination(0)}
href="#"
aria-label="Previous"
>
<span aria-hidden="true">Previous 3</span>
</a>
</li>
<li className={this.navButtonEnabled(1)} key="page-item-1">
<a
className="page-link"
onClick={this.props.OnPagination(1)}
href="#"
>
<span aria-hidden="true">
{this.navButtonDisplay(this.props.pages.navigation[1])}
</span>
</a>
</li>
<li className={this.navButtonEnabled(2)} key="page-item-2">
<a
className="page-link"
onClick={this.props.OnPagination(2)}
href="#"
>
<span aria-hidden="true">
{this.navButtonDisplay(this.props.pages.navigation[2])}
</span>
</a>
</li>
<li className={this.navButtonEnabled(3)} key="page-item-3">
<a
className="page-link"
onClick={this.props.OnPagination(3)}
href="#"
>
<span aria-hidden="true">
{this.navButtonDisplay(this.props.pages.navigation[3])}
</span>
</a>
</li>
<li className={this.navButtonEnabled(4)} key="page-item-4">
<a
className="page-link"
onClick={this.props.OnPagination(4)}
href="#"
aria-label="Next"
>
<span aria-hidden="true">Next 3</span>
</a>
</li>
</ul>
</nav>
);
}
}

在 onClick 事件中，我使用索引号调用事件处理程序(这是我要传递的参数(，根据单击的按钮正确呈现 ProductsGrid。但它根本不起作用，我尝试了几种方法，我只想通过一个参数传递一个数字来提升事件处理程序。我做错了什么？

这是控制台中显示的错误。

react_devtools_backend.js：6 警告：在现有状态转换期间(如在render内(无法更新。渲染方法应该是 props 和状态的纯函数。 在分页中(由目录创建( 在目录中(由应用程序创建( 在主(由应用程序创建( 在应用程序中

我在渲染过程中没有更改任何状态，当单击按钮时，事件处理程序会更改状态。这不是渲染过程。

Answer 1

请替换

onClick={this.props.OnPagination(0)}

跟

onClick={() => {this.props.OnPagination(0)}}

这是完整的代码(我已经注释了一些代码，以便我可以轻松地运行它到我的结论(：

import React from "react";
export default class ProductList extends React.Component {
handlePagination = (index) => {
console.log(index, 'index');
};
render() {
return (
<PaginationBar OnPagination={(index) => this.handlePagination(index)}
// pages={this.state.pages}
/>
);
}
}
class PaginationBar extends React.Component {
render() {
return (
<nav aria-label="Catalog page navigation">
<ul className="pagination">
<li key="page-item-0">
<a
className="page-link"
onClick={() => {this.props.OnPagination(0)}}
href="#"
aria-label="Previous"
>
<span aria-hidden="true">Previous 3</span>
</a>
</li>
<li key="page-item-1">
<a
className="page-link"
onClick={() => {this.props.OnPagination(1)}}
href="#"
>
<span aria-hidden="true">
{/*{this.navButtonDisplay(this.props.pages.navigation[1])}*/}
Previous 2
</span>
</a>
</li>
<li key="page-item-2">
<a
className="page-link"
onClick={() => {this.props.OnPagination(2)}}
href="#"
>
<span aria-hidden="true">
{/*{this.navButtonDisplay(this.props.pages.navigation[2])}*/}
Previous 1
</span>
</a>
</li>
<li key="page-item-3">
<a
className="page-link"
onClick={() => {this.props.OnPagination(3)}}
href="#"
>
<span aria-hidden="true">
{/*{this.navButtonDisplay(this.props.pages.navigation[3])}*/}
Next 2
</span>
</a>
</li>
<li key="page-item-4">
<a
className="page-link"
onClick={() => {this.props.OnPagination(4)}}
href="#"
aria-label="Next"
>
<span aria-hidden="true">Next 3</span>
</a>
</li>
</ul>
</nav>
);
}
}