Question

我有一个名为'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>);


}

Answer 1

将活动链接置于组件状态。类似的东西：

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


}

添加/删除css类以响应组件

1 个答案: