我正在 ReactJS 中使用钩子(Hook)构建一个过滤器，现在我需要对复选框应用一些样式。CSS 不是问题，我已经在普通版本中做到了:
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>
现在我需要对钩子(Hook)进行同样的思考，但我陷入了困境，我正在映射产品来源并制作产品类别的复选框列表......
...
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>
最佳答案
为什么需要使用复选框作为单选按钮？我假设是因为样式——也许是一个设计决定。在这种情况下，我将使用单选按钮来实现该功能，然后使用 CSS 隐藏单选按钮并显示反射(reflect)所选选项状态的复选框。
关于javascript - 如何在 ReactJS 中使用带有钩子(Hook)的复选框作为单选按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60550982/