React有两种使用表单控件的方式--受控组件和Uncontrolled Components
当您既没有提供受控组件所需的属性，也没有提供不受控组件所需的属性时，您会收到此警告：
警告：表单失败propType：您为没有onChange处理程序的表单字段提供了checked属性。这将呈现只读字段。如果该字段应该是可变的，请使用defaultChecked。否则，请设置onChange或readOnly。检查Login的render方法。

受控组件

所需属性：

1. value-<input>（非复选框或单选）、<select>、<textbox>或checked（复选框或单选）。
2. onChange
   React通过更新value或checked属性来处理元素的条件（取决于元素）。我们需要在进行更改时通知react，比如插入数据或选中复选框，这样react可以在重新呈现组件时更新元素的条件。为此，我们必须包含一个onChange处理程序，在其中我们将更新state或通知组件的父组件，因此它将更新props。

<input
  type="checkbox"
  checked={ this.props.checked }
  onChange={ this.checkboxHandler } 
/>

x一个一个一个一个x一个一个二个x

非受控组件

所需属性：
defaultValue-<input>（非复选框或单选）、<select>、<textbox>或defaultChecked（复选框或单选）。
React使用defaultValue or defaultChecked设置初始值，元素状态的更新由用户控制，通常通过使用refs的DOM。

<input
  type="checkbox"
  defaultChecked={ this.props.checked } 
/>

如果将来重新渲染组件，defaultChecked可能不会更新，因此请谨慎使用此方法。
你最好使用一个空函数来删除警告。特别是如果你想处理点击整个div，其中包括复选框和相关的文本。

<div onClick={this.handleClick}>
  <input type="checkbox" checked={this.props.checked} onChange={()=>{}}/>
  {this.props.text}
</div>

您需要将defaultChecked属性添加到checkbox：

<div>
    <input type='checkbox' defaultChecked />
</div>

对于那些喜欢功能组件而不是类组件的人来说，Controlled Component方法简单易行。如果你不知道Controlled Component是什么，请参考@Ori Drori在这个帖子中的详细解释。

import {useState} from "react";

export default function YourComponentName(){

  const [checked, setChecked] = useState(true);

  return (
    <>
          <input
            type="checkbox"
            checked={checked}
            onChange={() => setChecked(!checked)}
          />
    </>
  );
};

如果你遇到这个警告，你可以添加“readOnly”到你的输入.像这样的代码：

<div>
    <input type='checkbox' checked={ props.checkBoxChecked } readOnly />
</div>

或者你可以添加一个onChange事件，比如一个空箭头函数或者你关心的函数到你的输入中。像这样：

<div>
    <input type='checkbox' checked={ props.checkBoxChecked } onChange={() => {}} />
</div>

另外你也必须关心值属性。这个解决方案修复了我的问题，带有同样的警告，希望能有用。

对于那些正在使用react material ui和react-hook-form的用户。创建受控复选框的正确方法是

import { useForm, Controller } from "react-hook-form";
import {
  Checkbox,
  FormControlLabel,
} from "@mui/material";

const { handleSubmit, control } = useForm()
...

<Controller
  control={control}
  name={`${item.id}`}
  defaultValue={!!evaluationDimensions?.[item.id]?.selected} 
  render={({ field: { onChange, value } }) => (
    <FormControlLabel
      control={
        <Checkbox
          checked={value}
          onChange={onChange}
        />
      }
    />
  )}
/>
...

确保在使用checked={value}时使用defaultValue，以防止出现以下问题

React warning MUI: A component is changing the default checked state of an uncontrolled SwitchBase after being initialized