React与MUI复选框问题：无法单独选中单个复选框

你两个复选框共用了同一个状态变量checked，不管点击哪个复选框，都会更新这个唯一的状态值，导致两个复选框的选中状态完全同步，无法单独控制。

需要给每个复选框分配独立的状态管理逻辑，下面提供两种简洁的实现方式：

方式一：使用独立状态变量（适合少量复选框） #

1. 修改状态定义，为每个复选框单独声明状态：

const [domainChecked, setDomainChecked] = React.useState(true);
const [emailChecked, setEmailChecked] = React.useState(true);

2. 为每个复选框编写对应的状态更新函数：

const handleDomainChange = (event) => {
  setDomainChecked(event.target.checked);
};

const handleEmailChange = (event) => {
  setEmailChecked(event.target.checked);
};

3. 更新复选框组件，绑定各自的状态和处理函数：

<FormControlLabel
  control={<Checkbox checked={domainChecked} onChange={handleDomainChange} color="primary" />}
  label="Domain DNC file (Check if no list is required)"
/> 

<FormControlLabel 
  control={<Checkbox checked={emailChecked} onChange={handleEmailChange} color="primary" />}
  label="Email DNC file (Check if no list is required)" 
/> 

方式二：使用对象统一管理状态（适合多个复选框场景） #

1. 将状态定义为对象，存储每个复选框的选中状态：

const [checkedStates, setCheckedStates] = React.useState({
  domain: true,
  email: true
});

2. 编写通用的状态更新函数，通过标识区分不同复选框：

const handleChange = (event, checkboxKey) => {
  setCheckedStates(prevState => ({
    ...prevState,
    [checkboxKey]: event.target.checked
  }));
};

3. 更新复选框组件，传入对应的标识：

<FormControlLabel
  control={<Checkbox checked={checkedStates.domain} onChange={(e) => handleChange(e, 'domain')} color="primary" />}
  label="Domain DNC file (Check if no list is required)"
/> 

<FormControlLabel 
  control={<Checkbox checked={checkedStates.email} onChange={(e) => handleChange(e, 'email')} color="primary" />}
  label="Email DNC file (Check if no list is required)" 
/> 

完成上述修改后，两个复选框的状态就完全独立，支持单独选中、同时选中或都不选中的需求。

内容的提问来源于stack exchange，提问作者Jennifer De Goede