РЕАКЦИЯ: невозможно передать параметр обработчику событий подъема

Я не могу передать параметры из дочернего компонента в родительский компонент, используя тот же обработчик событий.

Дерево моих компонентов следует этой структуре:

  • ProductList
    • ProductsGrid
    • PaginationBar

В компоненте 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). Методы рендеринга должны быть чистой функцией свойств и состояния. в пагинации (созданный каталогом) в каталоге (созданный приложением) в основном (созданный приложением) в приложении

Я не меняю никакого состояния во время процесса рендеринга, обработчик событий меняет статус при нажатии кнопки. Это не процесс рендеринга.


reactjs parameters eventhandler lifting
person Ricardo    schedule 27.05.2020    source источник
comment
onClick={this.props.OnPagination(0)} это вызовет onPagination во время рендеринга. Я думаю, что изменение каждого onClick в вашем JSX на onClick={() => this.props.OnPagination(4)} должно исправить это.   -  person AWolf    schedule 27.05.2020

Ответы (1)


arrow_upward
0
arrow_downward

Пожалуйста, замените

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>
        );
    }
}
person Khabir    schedule 29.05.2020