REACT：不能将参数传递给一个提升事件处理程序。

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). 渲染方法应该是道具和状态的纯函数，在分页中（由目录创建）在目录中（由App创建）在main中（由App创建）在App中。

我在渲染过程中没有改变任何状态，事件处理程序在按钮被点击时改变了状态。这不是一个渲染过程。

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>
        );
    }
}