onclick function in react-grid-layout to get checkbox checked

Question

In react-grid-layout i am displaying name,image and a checkbox. The checkbox will be checked by default. The thing i want to do is onClicking the grid I want to change the checkbox status, here onCellClick() function is not working. Here is the code

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

You should use React state instead of manually dealing with the DOM. I mean, why even bother with React if you're going to mess with DOM? — Scimonster
– Scimonster, Commented Dec 19, 2016 at 6:44

Mayank Shukla · Accepted Answer · 2016-12-19 07:55:17Z

0

Reason, why all grid is getting selected, is you are using a single state variable for all rows, use an array, each entry will attached to each row, Try this:

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

answered Dec 19, 2016 at 7:55

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Daniel Over a year ago

0n executing checked[index] = !checked[index] ,It has been executing multiple times

Mayank Shukla Over a year ago

how do you know that, does that affecting the ui, still having the same issue ??

Daniel · Accepted Answer · 2016-12-27 08:34:09Z

0

Instead of using the Javascript DOM you should do it the react way and make use of 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;
     }
}

Although the above approach is enough but I would suggest you to make use a controlled checkbox component

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

edited Dec 27, 2016 at 8:34

Daniel

531 silver badge11 bronze badges

answered Dec 19, 2016 at 6:51

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

6 Comments

Daniel Over a year ago

already it has an error in onClick={this.onCellClick} --- Cannot read property 'onCellClick' of undefined

Shubham Khatri Over a year ago

Just realised that the map function was not bound to the context leading to onClick being undefined. Just fixed it

Daniel Over a year ago

it's working, thank you for answer. but on clicking a grid all the grids checkbox are are clicked

Shubham Khatri Over a year ago

In this case you need to define a state corresponding an individual checkbox , You can refer stackoverflow.com/questions/39227084/…

Daniel Over a year ago

ok, but i am displaying grid with checkbox on number of student name

|

Collectives™ on Stack Overflow

onclick function in react-grid-layout to get checkbox checked

2 Answers 2

2 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related