如何在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>
)

- honeytoast

Answer 1

它确实具有defaultChecked属性，您可以像这样使用它：

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

- Shayan Moghadam

---

我尝试了这个，但是React给了我一个警告： “警告：ForwardRef（SwitchBase）包含一个类型为checkbox的输入框，具有checked和defaultChecked属性。输入元素必须是受控或未受控的（指定checked属性或defaultChecked属性之一，但不是两者都有）。决定使用受控或未受控的输入元素，并删除其中一个属性。” - Tommi L.

@TommiL。是的，当您使用defaultChecked属性时，不一定需要使用checked属性，并且同时使用defaultChecked和checked属性会对React管理复选框产生干扰，因此您应该删除其中一个。感谢您的评论。 - Shayan Moghadam

我想知道为什么这个属性在复选框文档中没有出现。 - AxeEffect

使用 defaultChecked 而不是将值传递给 checked 会导致错误：MUI: A component is changing the default checked state of an uncontrolled SwitchBase after being initialized. - Kuba

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

试试这个。

- kiruba

Answer 3

将checkboxstate更改为maps类型

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

- Shadab Ahmed

---

但是我不知道应该有多少个复选框。 所以我认为将状态设置为所有复选框都无法工作。 - honeytoast

@honeytoast，你的“gid”字段是连续的吗？ - Shadab Ahmed

不，它不会。 - honeytoast

Answer 4

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 进行初始化。

- Zach Yu

Answer 5

你必须在组件中添加checked属性，有时使用value属性不起作用，最好始终使用checked属性。

<Checkbox onChange={this.handleChange}
          color="primary"
          checked={this.state.checked}
 />

- Jose Guerra

---

目前你的回答不够清晰，请[编辑]以添加更多细节，帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

有时候使用值但不起作用，总是使用checked属性可以解释一下吗？ - Ahmed Sbai

是的，如果使用了“checked”功能模式，则值将不起作用。 - Jose Guerra