クリックしたページ番号をハイライト表示

Question

私の反応アプリケーションにはページ番号があります。今すぐページ番号をクリックすると、クリックまたは現在のページ番号がハイライトされたり、異なる色で表示されたりしません。私はclassName = "text-success"を持っています。もし追加されれば、テキストは緑色になります。クリックされた番号に動的に追加したいのですが。私はそれをどのように行う必要があります

これは、あなたが現在アクティブなページが何であるかを知っている状態でcurrentPageを保存する必要が改ページのdiv（ページnunbers）

<div className="pagination-media"> 
             <a href="#" onClick={this.getPreviousPage} className="text-success"> 
              <span className="fa fa-chevron-left"></span> &nbsp; 
              PREV 
             </a> &nbsp; 
             {page_number_array.map((item, i) => (
               <a href="#" id={`page-${item}`} className="page-no-m" 
                onClick={() => this.pageNumberClicked(item)}>{`${item} `}</a> 
              ) 
             )} 
             &nbsp; 

             <a href="#" onClick={this.getNextPage} 
              className="text-success"><b>NEXT</b> &nbsp; 
              <span className="fa fa-chevron-right"></span></a> 
            </div> 

Answer 1

です。そして、あなたは条件付きで各リンクにtext-successクラスを追加することができます

let page_number_array = [1,2,3,4,5]; 
 

 
class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     currentPage: 1 
 
    } 
 
    } 
 
    pageNumberClicked = num => { 
 
    this.setState({ 
 
     currentPage: num 
 
    }); 
 
    } 
 
    getPreviousPage =() => { 
 
    this.setState({ 
 
     currentPage: this.state.currentPage - 1 > 0 ? this.state.currentPage - 1 : 1 
 
    }); 
 
    } 
 
    getNextPage =() => { 
 
    this.setState({ 
 
     currentPage: this.state.currentPage + 1 <= page_number_array.length ? this.state.currentPage + 1 : 1 
 
    }); 
 
    } 
 
    render() { 
 
    return (
 
     <div className="pagination-media"> 
 
     <a href="#" onClick={this.getPreviousPage} className="text-success"> 
 
      <span className="fa fa-chevron-left"></span> 
 
      &nbsp;PREV 
 
     </a> &nbsp; 
 
      {page_number_array.map((item, i) => (
 
       <a 
 
       href="#" 
 
       id={`page-${item}`} 
 
       className={`${this.state.currentPage === item ? 'text-success' : ''} page-no-m`} 
 
       onClick={() => this.pageNumberClicked(item)} 
 
       > 
 
       {`${item} `} 
 
       </a> 
 
      ))} 
 
       &nbsp; 
 
       <a href="#" onClick={this.getNextPage} 
 
        className="text-success"> 
 
        <b>NEXT</b> &nbsp; 
 
        <span className="fa fa-chevron-right"></span> 
 
       </a> 
 
       </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('root'));

.text-success { 
 
    color: green; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>