Question

我有一个分页ReactJS应用程序。

查看应用链接：

https://codepen.io/claudio-bitar/pen/VERORW

我想更改当前分页号的颜色。例如，显示了第一页，所以我想更改第一，第二，第二等的颜色...

代码：

class TodoApp extends React.Component {
  constructor() {
    super();
    this.state = {
      todos: {            
        "elements": ['a','b','c','d','e','f','g','h','i','j','k']          
  },

      currentPage: 1,
      todosPerPage: 3
    };
    this.handleClick = this.handleClick.bind(this);
  }

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

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

    // Logic for displaying current todos
    const indexOfLastTodo = currentPage * todosPerPage;
    const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
    const currentTodos = todos.elements.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.elements.length / todosPerPage); i++) {
      pageNumbers.push(i);
    }

    const renderPageNumbers = pageNumbers.map(number => {
      return (
        <li
          key={number}
          id={number}
          onClick={this.handleClick}
        >
          {number}
        </li>
      );
    });

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


ReactDOM.render(
  <TodoApp />,
  document.getElementById('app')
);

Answer 1

您需要根据当前页码为<li>提供一个类名，并为其提供一个CSS类。

例如：

const renderPageNumbers = pageNumbers.map(number => {
    return (
        <li
            key={number}
            id={number}
            onClick={this.handleClick}
            className={currentPage === number ? 'active' : ''}
        >
            {number}
        </li>
    );
});

这应导致一个<li id="1" class="active">1</li>或<li id="1">1</li>之类的DOM节点

ReactJS-更改当前分页号的颜色

1 个答案: