Проблема с добавлением активного класса на нумерацию страниц в React

Question

Я использую один пример простой пагинации, найденный здесь при переполнении стека.У меня есть приложение родительского компонента и разбиение на страницы дочернего компонента, то есть отображение вкладок пагинации.Я хочу реализовать / добавить активный класс к активной / текущей вкладке, по которой щелкают.Но мне это не удается.Когда я нажимаю на каждую вкладку нумерации страниц, устанавливается активная переменная (номера 1, 2, 3, 4), с текущим состоянием, полученным из переменной состояния activePage.Затем конкурирует эта переменная (активная) с индексом №.каждой вкладки, и перенаправляется true или false дочернему компоненту Pagination.Если это правда, должен быть добавлен активный класс, если не нужно ничего добавлять.У меня нет ошибок, но когда я нажимаю на вкладку № 2, содержимое не отображается.Может кто-нибудь определить, что не так?Вот мой родительский компонент:

import React, { Component } from 'react';
import Pagination from './Pagination';

class App extends Component {
      constructor() {
        super();
        this.state = {
          todos: ['a','b','c','d','e','f','g','h','i','j','k'],
          currentPage: 1,
          todosPerPage: 3,
          activePage:''
        };
        this.handleClick = this.handleClick.bind(this);
      }

      handleClick(event, index) {
        this.setState({
          currentPage: Number(event.target.id),
          activePage: index
        });
      }

      render() {
        const { todos, currentPage, todosPerPage } = this.state;

        // Logic for displaying current todos
        const indexOfLastTodo = currentPage * todosPerPage;
        const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
        const currentTodos = todos.slice(indexOfFirstTodo, indexOfLastTodo);

        const renderTodos = currentTodos.map((todo, index) => {
          return <li key={index}>{todo}</li>;
        });

        // Logic for displaying page numbers
        const pageNumbers = [];
        for (let i = 1; i <= Math.ceil(todos.length / todosPerPage); i++) {
          pageNumbers.push(i);
        }

        const renderPageNumbers = pageNumbers.map((number, index) => {
            const active = this.state.activePage;
          return (
            <Pagination
                key={number}
                id={number}
                active={active === index}
                clicked={this.handleClick.bind(index)}
              />
          );
        });

        return (
          <div>
            <ul>
                {renderTodos}
            </ul>
            <ul id="page-numbers">
                {renderPageNumbers}
            </ul>
          </div>
        );
      }
    }

export default App;

Вот дочерний компонент Пагинация:

import React from 'react';

const pagination = (props) => {

    return (
        <li 
            className={"Pagination" + (props.active ? ' active' : '')}
            onClick={props.clicked}>
            {props.id}
        </li>
    );
}

export default pagination;

Answer 1

Вы не передаете правильные параметры в обработчике "clicked", измените его на:

clicked={(e) => this.handleClick(e, number)} 

, а также вам нужно изменить метод обработчика на:

handleClick(event, index) {
  this.setState({
    currentPage: Number(index),
    activePage: index
  });
}

Там нетнужно полагаться на идентификатор цели события.