Reactjs 如何在物料界面中设置复选框组件？

作为标题，
当页面完全加载时，我想默认设置复选框“checked”
但是在关于， 没有选中

默认值
道具。

当我添加
checked={true}
props时，获取arror
如
“组件正在将复选框类型的非受控输入更改为受控…等”

我该怎么办

这是我的代码

我想列出所有组，包括默认组和其他组
让用户选择多组

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

导出默认类AcceptButton扩展组件{
建造师（道具）{
超级（道具）
this.handleChange=this.handleChange.bind（this）
this.state={open:true}
}
handleChange=事件=>{
this.setState（{checked:event.target.checked}）
}
render（）{
返回(
组：
{
group.data.map（g=>{
if（data.filter（d=>d.gid==g.gid）.length！=0）{
返回(
)}
否则{
返回(
)}
})
}
使现代化
)
从“React”导入React；
从“@material ui/core/Checkbox”导入复选框；
类复选框扩展了React.Component{
状态={
复选框：对，
};
handleChange=name=>event=>{
this.setState（{[name]：event.target.checked}）；
};
render（）{
返回(
);
}
}

试试这个。
从“React”导入React；
从“@material ui/core/Checkbox”导入复选框；
类复选框扩展了React.Component{
状态={
复选框：对，
};
handleChange=name=>event=>{
this.setState（{[name]：event.target.checked}）；
};
render（）{
返回(
);
}
}

试试这个。
将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>
)

const checkboxstatemap=new Map（）
导出默认类AcceptButton扩展组件{
建造师（道具）{
超级（道具）
this.handleChange=this.handleChange.bind（this）
this.state={checkboxstate:group.data.map（（item）=>checkboxstatemap.set（item.gid，true））}
}
componentDidMount（）{
handleChange=事件=>{
this.setState（{checked:event.target.checked}）
}
render（）{
返回(
组：
{
group.data.map（g=>{
if（data.filter（d=>d.gid==g.gid）.length！=0）{
返回(
)}
否则{
返回(
)}
})
}
使现代化
)
将复选框状态设置为映射类型

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

const checkboxstatemap=new Map（）
导出默认类AcceptButton扩展组件{
建造师（道具）{
超级（道具）
this.handleChange=this.handleChange.bind（this）
this.state={checkboxstate:group.data.map（（item）=>checkboxstatemap.set（item.gid，true））}
}
componentDidMount（）{
handleChange=事件=>{
this.setState（{checked:event.target.checked}）
}
render（）{
返回(
组：
{
group.data.map（g=>{
if（data.filter（d=>d.gid==g.gid）.length！=0）{
返回(
)}
否则{
返回(
)}
})
}
使现代化
)
从“React”导入React，{useCallback，useState}；
从“@material ui/core”导入{Checkbox，FormControlLabel}；
const defaultProps={
保证金：'正常'，
onChange：（e）=>{}
};
常量输入复选框=（道具）=>{
const{onChange，label，value=false，name，checkedIcon，icon，className，style}=props；
const[isChecked，setChecked]=使用状态（值）；
const\u onChange=useCallback(
（e） =>{
setChecked（（值）=>{
onChange（e，{[e.target.name]：！value}）；
返回！值；
});
},
[更改]
);
回来
};
InputCheckbox.defaultProps=defaultProps；
导出默认输入复选框；

使用onChange对回调值进行更改，并使用value进行初始化
导入React，{useCallback，useState}从'React'开始；
从“@material ui/core”导入{Checkbox，FormControlLabel}；
const defaultProps={
保证金：'正常'，
onChange：（e）=>{}
};
常量输入复选框=（道具）=>{
const{onChange，label，value=false，name，checkedIcon，icon，className，style}=props；
const[isChecked，setChecked]=使用状态（值）；
const\u onChange=useCallback(
（e） =>{
setChecked（（值）=>{
onChange（e，{[e.target.name]：！value}）；
返回！值；
});
},
[更改]
);
回来
};
InputCheckbox.defaultProps=defaultProps；
导出默认输入复选框；

使用onChange to callback value和use value to do initialize
它确实有一个defaultChecked道具，您可以像这样使用它：

<Checkbox defaultChecked={true} 
          onChange={this.handleChange}
          color="primary"
 />

它确实有一个defaultChecked道具，您可以像这样使用它：

<Checkbox defaultChecked={true} 
          onChange={this.handleChange}
          color="primary"
 />


但是我不知道应该有多少个复选框。所以我想把state设置为all复选框不行。@Honeytoos是你的
gid
字段顺序吗？不，不是。但是我不知道应该有多少个复选框。所以我想把state设置为all复选框不行。@Honeytoos是你的
gid
字段顺序吗？不，不是。我试过了此but then React给了我一个警告：
warning:ForwardRef（SwitchBase）包含一个checkbox类型的输入，该类型的输入同时具有选中和默认选中的属性。输入元素必须受控或不受控（指定选中的属性或默认选中的属性，但不能同时指定两者）。决定使用受控或非受控输入元素，并移除其中一个道具。
@TommiL。是的，对，可能当您使用defaultChecked道具时，checked道具不一定要使用，同时使用defaultChecked和checked道具有一个重新设置的干预