checkbox 控制元件的顯示

選取 checkbox 後第2個元件出現

1 . 第2個元件顯示與否設定成 state 變數: showB

const [showB, setShowB] = useState(true)

2 . input tag
checked屬性值代入 state 變數: showB
onChange屬性是 onChange handler，更換state為e.target.checked

<input 
  checked={showB}
  onChange={e => {
    setShowB(e.target.checked)
  }}
/>

3 . showB 為 true 時，就會顯示第2個 counter。

{showB && <Counter />}

e.target.checked

React <input> - These <input> props are relevant both for uncontrolled and controlled inputs:

onChange：一個事件處理函式。

在受控輸入 controlled inputs 中是必需的。
當使用者更改輸入值時立即觸發（例如，對於每個按鍵輸入都會觸發）。
與瀏覽器的輸入事件相似。