带有反应和 MUI 的复选框

Question

我有 2 个复选框，在 select 时都选中一个。 我希望能够 select 一个或两个或一个都没有。 我不确定为什么同时选择两者。

这些是我的复选框

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

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

This is my onChange:

         const handleChange = (event) => {
          setChecked(event.target.checked);
         };


And this is my state:

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

Answer 1

如果我正确理解了您的问题，您的设置将如下所示：

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

const handleChange = (event) => {
    setChecked(event.target.checked);
};
...
<Checkbox checked={checked} onChange={handleChange} color="primary"    />
<Checkbox checked={checked} onChange={handleChange} color="primary"    />
...

您遇到的问题是您只有一个名为checked的 state 。 Checked 要么为真，要么为假。 你将它传递给两个复选框。 同样，您只有一个更改处理程序可以将checked状态切换为 true 或 false。 并且您将相同的更改处理程序传递给两个复选框。 因此，当其中一个被切换时，两者都被切换。

您需要做的是有两个 useStates 和两个更改处理程序：

const [checked1, setChecked1] = React.useState(true);
const [checked2, setChecked2] = React.useState(true);


const handleChange1 = (event) => {
    setChecked1(event.target.checked);
};
const handleChange2 = (event) => {
    setChecked2(event.target.checked);
};
...
<Checkbox checked={checked1} onChange={handleChange1} color="primary"    />
<Checkbox checked={checked2} onChange={handleChange2} color="primary"    />
...

Answer 2

您只使用了一个state检查，它是true或false 。 当您选中其中一个复选框时，它将执行handleChange ，它只会将 state 从 true 更改为 false 或相反。 这就是为什么它们都被选中或不被选中的原因。

解决方案：将其中每个的 state 存储在 object

这是您的示例：

function App() {
  const [DNC, setDNC] = React.useState({
    Domain: false,
    Email: false
  });

  const { Domain, Email } = DNC;

  const handleChange = (event) => {
    setDNC({ ...DNC, [event.target.name]: event.target.checked });
  };
  console.log(DNC);

  return (
    <div>
      <FormControlLabel
        control={
          <Checkbox checked={Domain} onChange={handleChange} name="Domain" />
        }
        label="Domain 1 DNC file (Check if no list is required)"
      />
      <FormControlLabel
        control={
          <Checkbox checked={Email} onChange={handleChange} name="Email" />
        }
        label="Email DNC file (Check if no list is required)"
      />
    </div>
  );
}

另一种解决方案：使用两种状态，一种用于checkedEmail ，另一种用于checkedDomain ，每个state由onChange function处理。 像这样

function App() {
  const [checkedDomain, setCheckedDomain] = React.useState(true);
  const [checkedEmail, setCheckedEmail] = React.useState(true);
  const handleChangeDomain = (event) => {
    setCheckedDomain(event.target.checked);
  };

  const handleChangeEmail = (event) => {
    setCheckedEmail(event.target.checked);
  };
  return (
    <div>
      <FormControlLabel
        control={
          <Checkbox
            checked={checkedDomain}
            onChange={handleChangeDomain}
            color="primary"
          />
        }
        label="Domain DNC file (Check if no list is required)"
      />

      <FormControlLabel
        control={
          <Checkbox
            checked={checkedEmail}
            onChange={handleChangeEmail}
            color="primary"
          />
        }
        label="Email DNC file (Check if no list is required)"
      />
    </div>
  );
}
export default App;