React bootstrap 有可能让buttongroup在react引导中像multiselect一样工作吗？

我正在尝试使用ButtonGroup实现multi-select，就像使用only react引导中的第一个示例一样。可能吗？主要目标是使用ButtonGroup实现多选行为，将其用作网格中对象的过滤器。

确保这是可能的。显示切换选项的示例（我在自己的应用程序中使用了类似的东西）

一般来说，你需要做两件事；1.管理所选选项/过滤器的状态2。根据此状态设置按钮的样式

代码如下：

const Button = ReactBootstrap.Button;
const ButtonGroup = ReactBootstrap.ButtonGroup;

class Options extends React.Component {
  constructor(props) {
    super(props);
    this.toggleOption = this.toggleOption.bind(this);
    this.getBsStyle = this.getBsStyle.bind(this);
    this.state = {
      selected: {
        A: false,
        B: false,
        C: false,
      }
    }
  }

  toggleOption(e) {
    const key = e.target.value; // e.g. 'A'
    const value = !this.state.selected[key];
    const newSelected = Object.assign(this.state.selected, {[key]: value});
    this.setState({ selected: newSelected });
    console.log('this.state', this.state);
  }

  getBsStyle(key) {
   return this.state.selected[key] ? 'primary' : 'default';
  }

  render() {
    return (
      <ButtonGroup>
        <Button onClick={this.toggleOption} value='A' bsStyle={this.getBsStyle('A')}>
          Option A
        </Button>
        <Button onClick={this.toggleOption} value='B' bsStyle={this.getBsStyle('B')}>
          Option B
        </Button>
        <Button onClick={this.toggleOption} value='C' bsStyle={this.getBsStyle('C')}>
          Option C
        </Button>
      </ButtonGroup>
      );
  }
}

ReactDOM.render(<Options />, document.getElementById('app'));

const-Button=ReactBootstrap.Button；
const ButtonGroup=ReactBootstrap.ButtonGroup；
类选项扩展了React.Component{
建造师（道具）{
超级（道具）；
this.toggleOption=this.toggleOption.bind（this）；
this.getBsStyle=this.getBsStyle.bind（this）；
此.state={
选定：{
A:错，
B:错，
C:错，
}
}
}
切换选项（e）{
const key=e.target.value；//例如'A'
常量值=！this.state.selected[key]；
const newSelected=Object.assign（this.state.selected，{[key]：value}）；
this.setState（{selected:newSelected}）；
console.log（'this.state'，this.state）；
}
getBsStyle（键）{
返回此.state.selected[key]？“primary”：“default”；
}
render（）{
返回(
方案A
方案B
备选案文C
);
}
}
ReactDOM.render（，document.getElementById（'app'））；

感谢您提供此Kunal示例。在最近的react版本中，我不得不更新一些小东西：

选项A