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

与使用Javascript DOM相比，您应该使用react的方式并使用refs

<input type="checkbox" ref="stdattendance" name="stdattendance" checked/>



onCellClick:function(){
     if(React.findDOMNode(this.refs.stdattendance).checked == false){
        React.findDOMNode(this.refs.stdattendance).checked=true;
     }else{
        React.findDOMNode(this.refs.stdattendance).checked=false;
     }
}

虽然上面的方法已经足够了，但我还是建议您使用受控的checkbox组件

    var Student= React.createClass({
      getInitialState: function() {
         return {
            checked: true
         }
      },
      getDefaultProps:function() {
        return {
          className: "layout",
          rowHeight: 16,
          cols: 16,
          width:1200,
          isDraggable: false,
          isResizable:false,
          verticalCompact:false
        };
      },
      onCellClick:function(divid){
  var val;
  console.log("val"+divid);
  var inputElements = document.getElementsByClassName('checkboxgrp');
    for(var i=0; i<inputElements.length; i++){
    console.log(document.getElementsByClassName('checkboxgrp')[i].value);
    if(document.getElementsByClassName('checkboxgrp')[i].value==divid){
      if(document.getElementsByClassName('checkboxgrp')[i].checked==true){
        document.getElementsByClassName('checkboxgrp')[i].checked=false;
    }else{
    document.getElementsByClassName('checkboxgrp')[i].checked=true
    }}}
    },
      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.bind(this, divid)} 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" className="checkboxgrp" value={item.user} checked={this.state.checked}/>
          </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>
             );
        }
    });

Answer 2

选择所有网格的原因是，您对所有行都使用了单个状态变量，使用一个数组，每个条目都将附加到每行，请尝试以下操作：

  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>);
}
});