复选框问题oncheck功能

时间:2017-12-09 08:41:10

标签: javascript html5 reactjs material-ui web-component

首先请参阅以下代码。 我想要点击它时不会显示特定的复选框(id cfc1 )。 我在那里使用了onCheck函数。我没有找到任何方法,只要单击它就可以显示未选中的特定元素。我正在尝试使用代码 -

if(e.currentTarget.id === 'cfc1') {
    document.getElementById(e.currentTarget.id).checked = false; 
}

但它不起作用。

如何使用onCheck功能?

import React, {Component} from 'react';
import Checkbox from 'material-ui/Checkbox';

class Checkboxes extends Component {
  constructor() {
     super();
     this.state = {
        checkids:['cfc0', 'cfc1', 'cfc2', 'cfc3']
     };
     this.handleCheck = this.handleCheck.bind(this);
     this.getElements = this.getElements.bind(this);
  }
  getElements() {
     let arr = [];
     this.state.checkids.forEach(function(element) {
        arr.push(
          <Checkbox
             id={element}
             onCheck={this.handleCheck}
          />
        );
     }, this)
     return arr;
  }
  handleCheck(e) {
     console.log(e.currentTarget.id);
     console.log(e.currentTarget.checked);
  }
  render() {
     return(
       <div>
          {this.getElements()}
       </div>
     );
  }
}
export default Checkboxes

2 个答案:

答案 0 :(得分:1)

要使其适用于您的用例,请尝试使用状态变量来维护每个元素ID的已检查信息。

TT[, XX := if(length(output) >= 7) rollapply(output, 7, sum, na.rm = TRUE, align = "right", fill = NA_real_) else rep(NA_real_, length(output)), by = ID] ID date output XX 1: 100 1958-04-25 5 NA 2: 100 1958-04-26 8 NA 3: 100 1958-04-27 NA NA 4: 100 1958-04-28 6 NA 5: 100 1958-04-29 7 NA 6: 100 1958-04-30 8 NA 7: 100 1958-05-01 NA 34 8: 100 1958-05-02 12 41 9: 100 1958-05-03 13 46 10: 200 1958-05-04 2 NA 11: 200 1958-05-05 14 NA 12: 200 1958-05-06 12 NA 13: 200 1958-05-07 14 NA 14: 200 1958-05-08 14 NA 15: 200 1958-05-09 NA NA 处理程序中,通过设置状态来切换除所需框之外的所有框的复选框。

WORKING DEMO

onCheck

答案 1 :(得分:0)

您可以通过javascript使用this.checked = false

&#13;
&#13;
document.getElementById('cfc1').onclick = function() {
  this.checked = false;
}
&#13;
<label><input type="checkbox" id="cfc1">Click</label>
&#13;
&#13;
&#13;