可以通过以下步骤实现:
import React, { useState } from 'react';
function CheckboxComponent() {
const [selectedValues, setSelectedValues] = useState([]);
const handleCheckboxChange = (event) => {
const { value, checked } = event.target;
if (checked) {
setSelectedValues([...selectedValues, value]);
} else {
setSelectedValues(selectedValues.filter((val) => val !== value));
}
};
return (
<div>
<label>
<input type="checkbox" value="Option 1" onChange={handleCheckboxChange} />
Option 1
</label>
<label>
<input type="checkbox" value="Option 2" onChange={handleCheckboxChange} />
Option 2
</label>
<label>
<input type="checkbox" value="Option 3" onChange={handleCheckboxChange} />
Option 3
</label>
{/* Add more checkboxes as needed */}
<button onClick={() => console.log(selectedValues)}>Get Selected Values</button>
</div>
);
}
export default CheckboxComponent;
这是一个简单的示例,你可以根据实际需求进行修改和扩展。关于ReactJs和BootstrapUI的更多信息和用法,请参考官方文档和相关教程。
注意:本回答中没有提及腾讯云相关产品和产品介绍链接地址,因为该问题与云计算品牌商无关。
领取专属 10元无门槛券
手把手带您无忧上云