反応格子レイアウトのonclick機能でチェックボックスをチェックする

Question

反応格子レイアウトでは、名前、画像、チェックボックスを表示しています。チェックボックスはデフォルトでオンになっています。私がしたいことは、チェックボックスのステータスを変更したいグリッドをonClickingすることです。ここではonCellClick()機能が機能していません。 は、ここではそれが道に反応し、上記のアプローチが十分ではあるが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; 
    } 
} 

を利用して行う必要がありますコード

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を使用しているが、私はあなたが作ることを示唆しています制御されたチェックボックスコンポーネントを使用する

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