Question

我创建了一个简单的React组件，其中每个页面显示10行数据。分页的实现按预期工作，但我希望能够突出显示所选页面。

在我的构造函数中，我有一个初始状态“active：null”，然后我在handleClick函数中进行修改。

constructor(props) {
super(props);
this.state = {
  currentPage: 1,
  eventsPerPage: 10,
  active: null,
};
this.handleClick = this.handleClick.bind(this);
}

handleClick(index) {
this.setState({ currentPage: Number(index.target.id) });
if (this.state.active === index) {
  this.setState({ active: null });
} else {
  this.setState({ active: index });
}
}

用于将font-weight设置为粗体的功能。

myStyle(index) {
if (this.state.active === index) {
  return 'bold';
}
return '';
}

这是我渲染的内容。

const renderPageNumbers = pageNumbers.map((number, index) => (

  <p
    style={{ fontWeight: this.myStyle(index) }}
    key={number}
    id={number}
    onClick={index => this.handleClick(index)}
  >
    {number}
  </p>
));

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

仅供参考：这不是完整的代码。

我不太确定我哪里出错了，感谢任何帮助：）

Answer 1

pageNumbers.map((number, index) =>索引为零，我确定数字从1开始，所以当index === 0 and number === 1时，你会有this.myStyle(0)但是 this.handleClick(0)无效，因为您首先#id === 1而非0

为什么不只是为你的函数使用数字并删除索引以安全混淆

Answer 2

您需要将类的上下文绑定到myStyle函数，以便在其中使用this。

所以，在你的constructor中，你应该像这样添加它：（见最后一行）

constructor(props) {
    super(props);
    this.state = {
        currentPage: 1,
        eventsPerPage: 10,
        active: null,
    };
    this.handleClick = this.handleClick.bind(this);
    this.myStyle = this.myStyle.bind(this);
}

更改所选页码的颜色（分页）

2 个答案: