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

首先是带有复选框的前4个数字,单击“下一步”按钮后,接下来的4个带有复选框的数字应该会显示出来,上一个按钮会出现以返回。。。这样地。。 下一个 再次回到这里,复选框应该显示选中或选中。

单击此处查看- 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'));