javascript - React-grid-layout 中的 onclick 函数用于选中复选框

Question

在react-grid-layout中，我显示名称、图像和复选框。默认情况下会选中该复选框。我想做的事情是 onClicking 网格我想更改复选框状态，这里 onCellClick() 函数不起作用。 这是代码

var Student= React.createClass({
  getDefaultProps:function() {
    return {
      className: "layout",
      rowHeight: 16,
      cols: 16,
      width:1200,
      isDraggable: false,
      isResizable:false,
      verticalCompact:false
    };
  },
  onCellClick:function(){
  if(document.getElementById("stdattendance").checked==false){
  document.getElementById("stdattendance").checked=true;
  }else{
  document.getElementById("stdattendance").checked=false;
  }
  },
  generateDOM:function() {
  console.log(this.props.student+_.range(this.props.items)+new Array(this.props.student));
  var clickfun=this.click;
      return _.map(this.props.student, function(item, i) {
      var keyint=item.id;
      idval.push(item.id);
      var checkid=item.id+"-id";
      var divid=item.id+"-id";
      console.log("key"+keyint+idval);
      console.log("x after : " + i * 2 % 16);
      console.log("y after : " + Math.floor(i / 8) * 8);
      return (<div key={i} id={divid} onClick={this.onCellClick} data-grid={{x: i * 2 % 16, y: Math.floor(i / 8) * 8, w: 2, h: 6,static: true }}><span className="group-class1"> {item.name}</span> 
      <div id="check">
      <input type="checkbox" id="stdattendance" name="stdattendance" checked/>
      </div>
      <Image src="../images/No_image.png"/>
      </div>);     
      });

  },
  render: function() {
    // This prints the correct data

    console.log(this.props.student);
    return (
    <div>
    {(this.props.student.length)?
      <div>
    <ReactGridLayout 
          {...this.props}>

     {this.generateDOM()}
      </ReactGridLayout>
     </div>:""
      }
      </div>
         );
    }
});

Answer 1

为什么所有网格都被选中的原因是，您对所有行使用单个状态变量，使用数组，每个条目将附加到每一行，试试这个:

  var Student= React.createClass({
    getInitialState: function() {
       return {
         checked: []
       }
  },
  getDefaultProps:function() {
  return {
     className: "layout",
     rowHeight: 16,
     cols: 16,
     width:1200,
     isDraggable: false,
     isResizable:false,
     verticalCompact:false
  };
},
onCellClick:function(index){
     let checked = this.state.checked;
     checked[index] = !checked[index];
     this.setState({checked: checked});
}
generateDOM:function() {
  console.log(this.props.student+_.range(this.props.items)+new Array(this.props.student));
  var clickfun=this.click;
  return _.map(this.props.student, function(item, i) {
  var keyint=item.id;
  idval.push(item.id);
  var checkid=item.id+"-id";
  var divid=item.id+"-id";
  console.log("key"+keyint+idval);
  console.log("x after : " + i * 2 % 16);
  console.log("y after : " + Math.floor(i / 8) * 8);
  return (<div key={i} id={divid} onClick={this.onCellClick(i)} data-grid={{x: i * 2 % 16, y: Math.floor(i / 8) * 8, w: 2, h: 6,static: true }}><span className="group-class1"> {item.name}</span> 
  <div id="check">
  <input type="checkbox" ref="stdattendance" name="stdattendance" checked={!this.state.checked[i]}/>
  </div>
  <Image src="../images/No_image.png"/>


</div>);     
  }.bind(this));

},
render: function() {
   // This prints the correct data
   console.log(this.props.student);
   return (
     <div>
       {(this.props.student.length)?
          <div>
            <ReactGridLayout {...this.props}>
                {this.generateDOM()}
            </ReactGridLayout>
         </div>:""
       }
     </div>);
}
});