如何在 React 中使用復選框和 onChange

Question

我試圖理解這些代碼，但我不確定我的理解是否正確。 如果我理解錯誤，請告訴我。 我將在下面列出它們。

1. false在 useState 變量isChecked中。 （此時未選中復選框。）

2. 當handleOnChange被觸發時， isChecked將為true 。 （此時選中復選框。）

3. isChecked? 在{isChecked? "checked": "un-checked"} {isChecked? "checked": "un-checked"}為true 。 因此，如果復選框被選中，它將顯示為“選中”，如果未選中，它將顯示為“未選中”。

export default function App() {
  const [isChecked, setIsChecked] = useState(false);

  const handleOnChange = () => {
    setIsChecked(!isChecked);
  };

  return (
    <div className="App">
      Select your pizza topping:
      <div className="topping">
        <input
          type="checkbox"
          id="topping"
          name="topping"
          value="Paneer"
          checked={isChecked}
          onChange={handleOnChange}
        />
        Paneer
      </div>
      <div className="result">
        Above checkbox is {isChecked ? "checked" : "un-checked"}.
      </div>
    </div>
  );
}

Answer 1

你對代碼有很好的理解。 以下是正在發生的事情的摘要：

1. const [isChecked, setIsChecked] = useState(false)：使用 useState 掛鈎聲明 state 變量 isChecked 並將其初始化為 false。 這意味着當組件首次呈現時，復選框將被取消選中。

2. const handleOnChange = () => { setIsChecked(;isChecked): }。 handleOnChange function 已定義，它使用 state 更新程序 function setIsChecked 在 true 和 false 之間切換 isChecked 的值。 單擊復選框時將觸發此 function。

3. Paneer：checkbox被渲染，checked屬性被設置為isChecked的值，onChange屬性被設置為handleOnChange function。這意味着當checkbox被點擊時，handleOnChange function將被調用，並且值為isChecked 將被切換。

4. 上面的復選框是 {isChecked? "checked": "un-checked"}.: 文本“上面的復選框已被選中。” 或“上面的復選框未選中。” 根據復選框是否被選中來呈現。 這是使用三元運算符 isChecked 實現的？ “選中”：“未選中”。

總的來說，代碼創建了一個帶有“Paneer”的 label 的復選框，當復選框被選中時顯示“Above checkbox is checked”，當復選框未被選中時顯示“Above checkbox is un-checked”。