添加/刪除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>); 


}