如何在帶有鈎子的 ReactJS 中使用復選框作為單選按鈕？

Question

我正在用鈎子在 ReactJS 中構建一個過濾器，現在我需要對復選框應用一些樣式.. CSS 不是問題，我已經在 vanilla 中做到了：

function checkOne(checkbox) {

    var checkboxes = document.getElementsByName('plan')

    checkboxes.forEach((item) => {

        item !== checkbox ? item.checked = false : item.checked = true;

    })

}

=======================================================================
                             X 3

                  <label for="premium">
                      <input 
                        type="checkbox" 
                        name="plan" 
                        onclick="checkOne(this)"
                        class="input-check" 
                        value="Premium"
                       >
                      <span 
                       class="checkmark" 
                       id="premium"
                      >
                         Premium
                     </span>           
                 </label>

現在我需要做同樣的思考來對鈎子做出反應，但我被卡住了，我正在映射產品來源並制作產品類別的復選框列表......

... 

const [checked, setChecked] = useState(false) //hook

...

handleChange(e, checkbox){
      setProduct(e.target.value);
      setSearch(e.target.value);      

 let checkboxes = document.getElementsByName('products')

    checkboxes.forEach((item) => {

        item !== checkbox ? setChecked(false) : setChecked(true);

    })
}

... in render method

      <div className="filters" id="top">
         {uniqueProduct.map(product => (    
             <label key={product.id}>
                <input
                      className='filters-available-size'
                      type="checkbox"
                      value={product.category}
                      onChange={handleChangeProduct} // <-- ?¿?¿ what should go here?
                      name='product'
                   />
                   <span className="checkmark">
                       {product.category}
                   </span>
             </label>
          ))}
        </div>

Answer 1

為什么需要使用復選框作為單選按鈕？ 我要假設是因為造型——也許是設計決定。 在這種情況下，我將使用單選按鈕作為功能，然后使用 CSS 隱藏單選按鈕並顯示反映所選選項狀態的復選框。