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

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


}