Javascript 添加/删除css类以反应组件

我有一个用于分页的react组件，名为“Pager”，它根据结果的数量和页面的大小计算要显示的页面数量，然后在单击链接时获取该页面的结果。在我的例子中，当用户单击链接时，我在以友好方式添加/删除css类时遇到问题。当第一次呈现页面时，只有数字“1”必须是“活动”的，但是当用户单击链接“2”、“3”等时，我需要删除上一个活动链接的className属性，并将其添加到单击的链接中

关于如何实现这一点有什么想法吗

我的代码如下所示：

export class Pager extends React.Component {


constructor() {
    super();
}


handleClick(i){
    console.log('Clicked on'+i);
    this.props.dispatch(modelActionsCreator.findModelsByProductType(this.props.productType,i));
}

render() {
    console.log(this.props.numPages);
    let links = [];


    for (let i = 1; i <= this.props.numPages; i++) {
        links.push(<li key={i} className={i==1?'active':''}><a href="#" onClick={(e)=>{
        e.preventDefault();
        this.handleClick(i);
        }}>{i}</a></li>);
    }


    return (<ul className="pagination">
        <li className="prev-page"><a className="icon-arrow-left" href="#"></a></li>
        {
            links.map((item)=> {
                return item;
            })
        }
        <li className="next-page"><a className="icon-arrow-right" href="#"></a></li>
    </ul>);


}

导出类分页器扩展React.Component{
构造函数（）{
超级（）；
}
handleClick（一）{
console.log（'单击'+i'）；
this.props.dispatch（modelActionsCreator.FindModelByProductType（this.props.productType，i））；
}
render（）{
console.log（this.props.numPages）；
让链接=[]；
for（设i=1；i{
退货项目；
})
}

）；
}

将活动链接置于组件状态。比如：

export class Pager extends React.Component {

constructor() {
    super();
    this.state={
      i:1
    }
}


handleClick(i){
    console.log('Clicked on'+i);
    this.props.dispatch(modelActionsCreator.findModelsByProductType(this.props.productType,i));
    this.setState({i:i});
}

render() {
    console.log(this.props.numPages);
    let links = [];


    for (let i = 1; i <= this.props.numPages; i++) {
        links.push(<li key={i} className={i==this.state.i?'active':''}><a href="#" onClick={(e)=>{
        e.preventDefault();
        this.handleClick(i);
        }}>{i}</a></li>);
    }


    return (<ul className="pagination">
        <li className="prev-page"><a className="icon-arrow-left" href="#"></a></li>
        {
            links.map((item)=> {
                return item;
            })
        }
        <li className="next-page"><a className="icon-arrow-right" href="#"></a></li>
    </ul>);


}

导出类分页器扩展React.Component{
构造函数（）{
超级（）；
这个州={
i:1
}
}
handleClick（一）{
console.log（'单击'+i'）；
this.props.dispatch（modelActionsCreator.FindModelByProductType（this.props.productType，i））；
this.setState（{i:i}）；
}
render（）{
console.log（this.props.numPages）；
让链接=[]；
for（设i=1；i{
退货项目；
})
}

）；
}

将活动链接置于组件状态。比如：

export class Pager extends React.Component {

constructor() {
    super();
    this.state={
      i:1
    }
}


handleClick(i){
    console.log('Clicked on'+i);
    this.props.dispatch(modelActionsCreator.findModelsByProductType(this.props.productType,i));
    this.setState({i:i});
}

render() {
    console.log(this.props.numPages);
    let links = [];


    for (let i = 1; i <= this.props.numPages; i++) {
        links.push(<li key={i} className={i==this.state.i?'active':''}><a href="#" onClick={(e)=>{
        e.preventDefault();
        this.handleClick(i);
        }}>{i}</a></li>);
    }


    return (<ul className="pagination">
        <li className="prev-page"><a className="icon-arrow-left" href="#"></a></li>
        {
            links.map((item)=> {
                return item;
            })
        }
        <li className="next-page"><a className="icon-arrow-right" href="#"></a></li>
    </ul>);


}

导出类分页器扩展React.Component{
构造函数（）{
超级（）；
这个州={
i:1
}
}
handleClick（一）{
console.log（'单击'+i'）；
this.props.dispatch（modelActionsCreator.FindModelByProductType（this.props.productType，i））；
this.setState（{i:i}）；
}
render（）{
console.log（this.props.numPages）；
让链接=[]；
for（设i=1；i{
退货项目；
})
}

）；
}