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

我创建了一个简单的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 });
}
}

以及一个将字体大小设置为粗体的功能

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>
);

const renderPageNumbers=pageNumbers.map（（数字，索引）=>(
this.handleClick（index）}
>
{number}

));
返回(
{renderPageNumbers}
);

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

---

我不太确定哪里出错了，非常感谢您的帮助：）

您需要将类的上下文绑定到

myStyle

函数，以便在其中使用

this

因此，在你的

构造函数中，你应该这样添加它：
（见最后一行）

pageNumbers.map（（number，index）=>
索引是从零开始的，我确信数字从1开始，所以当
index==0和number==1
时，您将拥有
this.myStyle（0）
但是
此.handleClick（0）
将不起作用，因为您首先
\id==1
而不是
0

为什么不在功能中使用数字并删除索引以避免混淆
您是否可以为所选页面获取粗体文本？您能否上传（1）您拥有的屏幕截图和（2）的两个屏幕截图你想要什么的屏幕截图没有发生。我希望选择的页码是粗体的，未选择的页码保持正常。好的。现在我明白你的问题了。那很好。你知道我应该怎么做吗？哦，我把它与
handleClick
混淆了。抱歉。不幸的是，除非e答案经过编辑：(
constructor(props) {
    super(props);
    this.state = {
        currentPage: 1,
        eventsPerPage: 10,
        active: null,
    };
    this.handleClick = this.handleClick.bind(this);
    this.myStyle = this.myStyle.bind(this);
}