Question

我正在使用一个在堆栈溢出时发现的简单分页示例。我有父组件应用程序和子组件分页，它们显示分页选项卡。我想实现/添加类活动到单击的活动/当前选项卡。但是我没有成功。当我单击每个分页选项卡时，会设置活动变量（数字1、2、3、4），其当前状态是从状态变量activePage获取的。然后使用索引号对这个变量（活动）进行编译。标签的每个选项卡，并将真或假转发给子组件分页。如果为true，则应添加活动类，否则应添加任何内容。我没有错误，但是当我单击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={(e) => this.handleClick(e, number)}

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

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

无需依赖事件目标ID。

在React

1 个答案: