复选框问题oncheck功能

Question

请首先查看以下代码。我想要点击它时不会显示特定的复选框（带有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

Answer 1

为了使它适用于您的用例，请尝试使用状态变量来维护每个元素id的已检查信息。

并且在onCheck处理程序中，通过设置状态来切换除所需框之外的所有框的复选框。

WORKING DEMO

class App extends Component {
  constructor() {
    super();
     this.state = {
        checkids:{
          'cfc0': false,
          'cfc1': false, 
          'cfc2': false,
          'cfc3': false
        }
     };
  }

  handleCheck(e) {
     const checkids = {...this.state.checkids};
     checkids[e.target.id] = e.target.id === "cfc1" ? false : !checkids[e.target.id];

     this.setState({checkids});
  }

  getElements() {
     let arr = [];
     Object.keys(this.state.checkids).forEach(function(element, index) {
        arr.push(
          <Checkbox
             key={index}
             id={element}
             checked={this.state.checkids[element]}
             onCheck={this.handleCheck.bind(this)}
          />
        );
     }, this)
     return arr;
  }

  render() {
    return (
      <MuiThemeProvider>
        <div>
          {this.getElements()}
       </div>
      </MuiThemeProvider>
    );
  }
}

Answer 2

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

document.getElementById('cfc1').onclick = function() {
  this.checked = false;
}

<label><input type="checkbox" id="cfc1">Click</label>