在React中实现只选中一个复选框而不是选中所有复选框的方法有多种。以下是一种常见的实现方式:
下面是一个示例代码:
import React, { useState } from 'react';
const CheckboxGroup = () => {
const [selectedCheckbox, setSelectedCheckbox] = useState(null);
const handleCheckboxChange = (value) => {
setSelectedCheckbox(value);
};
return (
<div>
<label>
<input
type="checkbox"
value="checkbox1"
checked={selectedCheckbox === "checkbox1"}
onChange={() => handleCheckboxChange("checkbox1")}
/>
Checkbox 1
</label>
<label>
<input
type="checkbox"
value="checkbox2"
checked={selectedCheckbox === "checkbox2"}
onChange={() => handleCheckboxChange("checkbox2")}
/>
Checkbox 2
</label>
<label>
<input
type="checkbox"
value="checkbox3"
checked={selectedCheckbox === "checkbox3"}
onChange={() => handleCheckboxChange("checkbox3")}
/>
Checkbox 3
</label>
</div>
);
};
export default CheckboxGroup;
在上述示例中,我们使用useState钩子来创建一个名为"selectedCheckbox"的state变量,并使用handleCheckboxChange函数来更新该变量的值。在每个复选框的checked属性中,我们使用"selectedCheckbox"的值来判断是否选中该复选框。
这种方法可以确保只有一个复选框被选中,而不会选中所有复选框。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云