Reactjs中一个有趣的小程序，有问题

Question

我想把数字从1到12＆amp;想要通过组件中的4个项目显示它们 - 首先带有复选框的前4个数字，然后点击下一个按钮，接着显示4个带复选框的数字，然后上一个按钮返回。 ..喜欢这个...... ＆amp;偶数奇数按钮也应该出现在它们旁边。假设当我点击下一个并再次返回时，我会检查组件中的一个复选框，该复选框应显示为已选中或已选中。

代码中存在一些问题，这就是为什么我不希望发生的事情。有什么帮助吗？

点击此处查看 - DEMO

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Checkbox from 'material-ui/Checkbox';

class App extends Component {
   constructor() {
     super();
     this.state = {
        ids:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        getids:[],
        idstaken:[],
        isPrevious: true,
        isNext: false,
        counter:0
     }
     this.getElements = this.getElements.bind(this);
     this.handleCheck = this.handleCheck.bind(this);
     this.handleDetails = this.handleDetails.bind(this);
     this.handlePrevious = this.handlePrevious.bind(this);
     this.handleNext = this.handleNext.bind(this);
   }
   componentDidMount() {
       let arr = [];
       for(var i=0; i<4; i++) {
          arr.push(this.state.ids[i]);
       }
       this.setState({getids: arr});
   }
   handlePrevious() {
       let arr = [];
       if(this.state.counter == 8) {
          this.setState({isPrevious: true, isNext: false});
       }
       for( var i = (this.state.counter - 8); i < (this.state.counter - 4); i++){
          arr.push(this.state.ids[i]);
       }
       this.setState({counter: arr.length, getids: arr});
     }
     handleNext() {
        let arr = [];
        if(this.state.counter == 8) {
           this.setState({isPrevious: false, isNext: true});
        }
        for(var i = this.state.counter; i < (this.state.counter + 4); i++){
           arr.push(this.state.ids[i]);
        } 
        this.setState({counter: arr.length, getids: arr});
     }
     handleCheck(e) {
        this.state.idstaken.push(e.currentTarget.id);
        console.log(e.currentTarget.id);
     }
     handleDetails() {
        console.log("even or odd is clicked!");
     }
     getElements() {
        let details;
        let array = [];
        let temp = [];
        this.state.getids.forEach(function(element) {
            if(element % 2 == 0) {
               details = <button onClick={this.handleDetails}> even </button>;
            }
            else {
               details = <button onClick={this.handleDetails}> odd </button>;
            }
            temp.push(
               <tr> 
                <td><Checkbox
                      id={element}
                      onCheck={this.handleCheck}
                   /></td>
                <td>{element}</td>
                <td>{details}</td> 
              </tr>
           );
         }, this)
         return temp;
      }
        render() {
          return(
            <MuiThemeProvider>
              <div>
                <div>
                  <table>
                    <tr>
                      <td><button onClick = {this.handlePrevious} hidden={this.state.isPrevious}> Previous </button></td>
                      <td><button onClick = {this.handleNext} hidden={this.state.isNext}> Next </button></td>
                    </tr>
                 </table>
               </div>
               <div>
                <table>
                  {this.getElements()}
                </table>
               </div>
             </div>
           </MuiThemeProvider>
          );  
        }
  }

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