如何在Material-UI React中设置复选框组件？

Question

作为标题， 我想在页面完全加载时默认设置复选框“已选中”， 但在关于Material-UI Checkbox component的教程中，没有defaultChecked道具。 当我添加checked={true}道具，然后得到像恐怖 “组件正在更改要控制的类型复选框的不受控制的输入......等等” 我应该怎么做？

有我的代码 我想列出所有组，包括默认组，另一个让用户选择多组。

  export default class AcceptButton extends Component {
  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.state = {open: true}
  }
  handleChange = event => {
    this.setState({checked: event.target.checked})
  }
  render() {
    return (
      <Fragment>
       <div>
         group : 
       </div>
       <div className="f-col">
       {
        group.data.map(g => {
          if (data.filter(d => d.gid == g.gid).length != 0) {
            return (
              <FormControlLabel
                key={g.gid}
                control={
                  <Checkbox
                    disabled={true}
                    onChange = {this.handleChange}
                    color="primary"
                    checked={this.state.open}
                  />
                }
                label={g.gname}
              />
          )}
          else {
            return (
              <FormControlLabel
                key={g.gid}
                control={
                  <Checkbox
                    onChange={this.handleChange}
                    value={g.gname}
                    color="primary"
                  />
                }
                label={g.gname}
              />
          )}
        })
      }
    </div> 
    <button className="btn" onClick={this.postassignhandle}>update</button>
  </Fragment>
)

Answer 1

使checkboxstate成为地图类型

const checkboxstatemap = new Map()
export default class AcceptButton extends Component {
constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)

    this.state = {checkboxstate: group.data.map((item) =>  checkboxstatemap.set(item.gid, true ))}
}

componentDidMount() {
handleChange = event => {
    this.setState({checked: event.target.checked})
}
render() {
    return (
    <Fragment>
    <div>
        group : 
    </div>
    <div className="f-col">
    {
        group.data.map(g => {
        if (data.filter(d => d.gid == g.gid).length != 0) {
            return (
            <FormControlLabel
                key={g.gid}
                control={
                <Checkbox
                    disabled={true}
                    onChange = {this.handleChange}
                    color="primary"
                    checked={this.state.checkboxstate.get(g.gid)}
                />
                }
                label={g.gname}
            />
        )}
        else {
            return (
            <FormControlLabel
                key={g.gid}
                control={
                <Checkbox
                    onChange={this.handleChange}
                    value={g.gname}
                    color="primary"
                />
                }
                label={g.gname}
            />
        )}
        })
    }
    </div> 
    <button className="btn" onClick={this.postassignhandle}>update</button>
</Fragment>
)

Answer 2

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

class Checkboxes extends React.Component {
  state = {
    checkedBox: true,
  };

  handleChange = name => event => {
    this.setState({ [name]: event.target.checked });
  };

  render() {
    return (
      <div>
        <Checkbox
          checked={this.state.checkedBox}
          onChange={this.handleChange('checkedBox')}
          value="checkedBox"
        />
      </div>
    );
  }
}

试试这个。