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

Question

如题，
我想在页面完全加载时默认设置复选框 "checked"，
但在关于 Material-UI Checkbox component 的教程中，没有 defaultChecked 道具。
当我添加 checked={true} 道具时，然后得到 arror 喜欢
"A component is changing an uncontrolled input of type checkbox to be controlled...etc"
我该怎么办？

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

  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

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

试试这个。

Answer 2

使复选框状态成为地图类型

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 3

import React, { useCallback, useState } from 'react';
import { Checkbox, FormControlLabel } from '@material-ui/core';

const defaultProps = {
    margin: 'normal',
    onChange: (e) => {}
};
const InputCheckbox = (props) => {
    const { onChange, label, value=false, name, checkedIcon, icon, className, style } = props;

    const [ isChecked, setChecked ] = useState(value);
    const _onChange = useCallback(
        (e) => {
            setChecked((value) => {
                onChange(e, { [e.target.name]: !value });
                return !value;
            });
        },
        [ onChange ]
    );
    return <FormControlLabel className={className} style={style} label={label} control={<Checkbox name={name} icon={icon} checkedIcon={checkedIcon} checked={isChecked} onChange={_onChange} />} />;
};
InputCheckbox.defaultProps = defaultProps;
export default InputCheckbox;

用onChange回调value，用value做初始化

Answer 4

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

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

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

How to set checkbox component checked in Material-UI React?

reactjs

material-ui