Добавление/удаление классов css для реагирования компонентов

Question

У меня есть компонент реакции для разбивки на страницы под названием «Пейджер», в зависимости от количества результатов и размера страницы он вычисляет количество отображаемых страниц, а затем при нажатии ссылку, он отображает результаты для этой страницы. В моем случае у меня возникла проблема при добавлении/удалении 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>); 


}