如何在 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”。