在 React 的分页上添加活动类的问题答案

【问题标题】：Problem with adding active class on pagination in React在 React 的分页上添加活动类的问题
【发布时间】：2019-07-02 01:55:16
【问题描述】：

我使用了一个关于堆栈溢出的简单分页示例。我有父组件应用程序和子组件分页，即显示分页选项卡。我想实现/添加类活动到单击的活动/当前选项卡。但我没有成功。当我单击每个分页选项卡时，设置了活动变量（数字 1、2、3、4），当前状态是从状态变量 activePage 获得的。然后用索引号计算这个变量（活动）。每个选项卡，并将 true 或 false 转发给子组件分页。如果为真，则应添加活动类，如果不添加任何内容。我没有错误，但是当我单击 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;

这里是子组件Pagination：

import React from 'react';

const pagination = (props) => {

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

export default pagination;

【问题讨论】：

标签： javascript reactjs pagination

【解决方案1】：

您没有在“点击”处理程序中传递正确的参数，请将其更改为：

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

您还需要将处理程序方法修改为：

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

无需依赖事件目标 ID。

【讨论】：