javascript - 复选框问题 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>
    );
  }
}