帶有反應和 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;