,可以通过以下步骤实现:
<input>
元素的type
属性设置为checkbox
创建复选框组件。为了方便操作,可以为每个复选框设置一个唯一的value
属性。onChange
事件处理程序。在事件处理程序中,可以使用event.target.checked
属性来确定复选框的选中状态。useState
钩子或类组件的state
来保存所选复选框的值。每次选中或取消选中复选框时,都需要更新状态。以下是一个简单的示例代码:
import React, { useState } from 'react';
const CheckboxGroup = () => {
const [checkboxes, setCheckboxes] = useState({}); // 用于保存复选框的值
const handleCheckboxChange = (event) => {
const { name, checked } = event.target;
setCheckboxes({ ...checkboxes, [name]: checked }); // 更新复选框的值
};
return (
<div>
<label>
<input
type="checkbox"
name="checkbox1"
value="Checkbox 1"
checked={checkboxes.checkbox1}
onChange={handleCheckboxChange}
/>
Checkbox 1
</label>
<label>
<input
type="checkbox"
name="checkbox2"
value="Checkbox 2"
checked={checkboxes.checkbox2}
onChange={handleCheckboxChange}
/>
Checkbox 2
</label>
{/* 其他复选框... */}
</div>
);
};
export default CheckboxGroup;
在这个例子中,我们使用了React的useState
钩子来创建一个名为checkboxes
的状态。通过handleCheckboxChange
函数,我们更新checkboxes
状态对象中相应复选框的值。
这是一个简单的React.js中检索复选框值的示例。根据具体需求,可以进一步扩展和优化代码。对于更复杂的场景,可以考虑使用状态管理工具如Redux来处理复选框的状态。
领取专属 10元无门槛券
手把手带您无忧上云