Javascript 复选框默认选中状态问题

我有以下代码。在我的项目中，我现在面临着一些问题。我想在getElements（）中使用forEach（）循环，而不是map（），而且我只想在选中复选框后显示默认选中状态，然后再返回那里。

对这个问题有什么帮助吗

这里是=>

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

class App extends Component {
   itemsPerPage = 4
   constructor(props) {
      super(props);
      var ids = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
      this.state = {
      ids: ids,
      idsChecked: ids.map(() => false),
      page: 0
   }
  }
  componentDidMount = () => {
  }
  handlePrevious = () => {
     this.setState({ page: this.state.page - 1 });
  }
  handleNext = () => {
     this.setState({ page: this.state.page + 1 });
  }
  handleCheck = (e) => {
    var id = Number(e.currentTarget.id);
    var idsChecked = this.state.idsChecked.map((bool, i) => i === id ? !bool : bool);
    this.setState({ idsChecked: idsChecked });
  }
  handleDetails = (e) => {
    var id = Number(e.currentTarget.getAttribute("rel"));
    console.log("even or odd is clicked! (button #id: " + id + ")");
  }
  getElements = () => {
    var first = this.state.page * this.itemsPerPage;
    var trs = this.state.ids.slice(first, first + this.itemsPerPage).map((element, i) => {
    let details = <button rel={first + i} onClick={this.handleDetails}> {element % 2 ? "odd" : "even"} </button>;
     return (
      <tr key={element}>
         <td><Checkbox
               checked={this.state.idsChecked[first + i]}
               id={first + i}
               onCheck={this.handleCheck}
         /></td>
         <td>{element}</td>
         <td>{details}</td>
      </tr>
    );
  });
  return trs;
}
render() {
   var hasPrevious = this.state.page > 0;
   var hasNext = this.state.page < Math.floor((this.state.ids.length - 1) / this.itemsPerPage);
   var tdStyle = {width: "80px"}
   return (
     <div>
       <div>
         <table>
            <tbody>
              <tr>
                <td style={tdStyle}>{hasPrevious && <button onClick={this.handlePrevious} hidden={this.state.hasPrevious}> Previous </button>}</td>
                <td style={tdStyle}>{hasNext && <button onClick={this.handleNext} hidden={this.state.isNext}> Next </button>}</td>
             </tr>
           </tbody>
         </table>
       </div>
       <div>
         <table>
           <tbody>
             {this.getElements()}
           </tbody>
         </table>
       </div>
      </div>
  );
 }
}

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

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“物料界面/复选框”导入复选框；
类应用程序扩展组件{
itemsPerPage=4
建造师（道具）{
超级（道具）；
VarIds=[1,2,3,4,5,6,7,8,9,10,11,12]；
此.state={
ids:ids，
idsChecked:ids.map（（）=>false），
页码：0
}
}
componentDidMount=（）=>{
}
handlePrevious=（）=>{
this.setState（{page:this.state.page-1}）；
}
handleNext=（）=>{
this.setState（{page:this.state.page+1}）；
}
handleCheck=（e）=>{
var id=编号（如currentTarget.id）；
var idsChecked=this.state.idsChecked.map（（bool，i）=>i==id？！bool:bool）；
this.setState（{idsChecked:idsChecked}）；
}
处理细节=（e）=>{
var id=编号（例如，currentTarget.getAttribute（“rel”））；
log（“点击偶数或奇数！（按钮id:+id+））；
}
getElements=（）=>{
var first=this.state.page*this.itemsPerPage；
var trs=this.state.ids.slice（first，first+this.itemsPerPage）.map（（element，i）=>{
let details={元素%2？“奇数”：“偶数”}；
返回(
{element}
{详细信息}
);
});
返回trs；
}
render（）{
var hasPrevious=this.state.page>0；
var hasNext=this.state.page

要将，

map

替换为

forEach

，请将复选框元素推到数组上，然后从

getElements（）

返回该数组

使用

组件的将默认值设置为true

完整代码：

  getElements = () => {
    var first = this.state.page * this.itemsPerPage;
    let checkboxArray = [];   // array for storing the elements
    this.state.ids.slice(first, first + this.itemsPerPage).forEach((element, i) => {
      let details = <button rel={first + i} onClick={this.handleDetails}> {element % 2 ? "odd" : "even"} </button>;
      checkboxArray.push(
        <tr key={element}>
          <td><Checkbox
            checked={this.state.idsChecked[first + i]}
            id={first + i}
            defaultChecked={true/*use the defaultChecked prop*/}
            onCheck={this.handleCheck}
          /></td>
          <td>{element}</td>
          <td>{details}</td>
        </tr>
      );
    });
    return checkboxArray;   // return the array
  }
  render() {
    var hasPrevious = this.state.page > 0;
    var hasNext = this.state.page < Math.floor((this.state.ids.length - 1) / this.itemsPerPage);
    var tdStyle = {width: "80px"}
    return (
      <div>
        <div>
          <table>
            <tbody>
              <tr>
                <td style={tdStyle}>{hasPrevious && <button onClick={this.handlePrevious} hidden={this.state.hasPrevious}> Previous </button>}</td>
                <td style={tdStyle}>{hasNext && <button onClick={this.handleNext} hidden={this.state.isNext}> Next </button>}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div>
          <table>
            <tbody>
              {this.getElements()}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

getElements=（）=>{
var first=this.state.page*this.itemsPerPage；
让checkboxArray=[]；//用于存储元素的数组
this.state.ids.slice（first，first+this.itemsPerPage）.forEach（（element，i）=>{
let details={元素%2？“奇数”：“偶数”}；
checkboxArray.push(
{element}
{详细信息}
);
});
return checkboxArray；//返回数组
}
render（）{
var hasPrevious=this.state.page>0；
var hasNext=this.state.page

但它工作正常吗？链接对我也有效。谢谢sebastian。那家伙把我弄糊涂了-_-没关系@rajesh多么酷的在线编辑器和堆栈。。stackblitz.com:）你的方法是正确的。但是我认为defaultChecked应该是false，对吗？否则它会在输出中显示所有最初选中的内容@DaneI只想显示默认选中状态，我以为你想选中它。您可以选择任何一种方式：）