React Bootstrap ToggleButtonGroup 和多选

Question

我有以下 ToggleButtonGroup:

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

但是它只允许选择一项。如果我打开一个项目，那么前一个项目将被关闭。有没有办法允许多项选择，以便可以打开多个项目？

很想听到一些答案。谢谢

Answer 1

我相信这就是它的本意；切换按钮以仅从中获取一个值。但是，您可以改用 check-boxes 并相应地设置样式。

Answer 2

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