React Bootstrap ToggleButtonGroup和多项选择

如何解决React Bootstrap ToggleButtonGroup和多项选择

我有以下ToggleButtonGroup：

<ToggleButtonGroup name="test">
    {categories.map(category => (
        <ToggleButton>{category.name}</ToggleButton>  
    ))}
</ToggleButtonGroup>

但是，它仅允许选择一项。如果我打开一个项目，则前一个项目将被关闭。有没有一种方法可以允许多项选择，以便可以切换多个项目？

很乐意听到一些答案。谢谢。

解决方法

type="checkbox"是您需要的东西

//select initial buttons if the values 1 or 3
const [value,setValue] = useState([1,3]);

<ToggleButtonGroup type="checkbox" onChange={handleChange} value={value}>....

const handleChange = (val) => {
    //val is an array of selected values of buttons
    setValue(val);
};

demo

,

我相信这就是预期的样子；切换按钮只能从中获得一个值。但是，您可以改用复选框并相应地设置其样式。