反応ブートストラップでは、buttongroupを複数選択のように動作させることはできますか？

Question

私はthis linkの最初の例のように、ButtonGroupを使用して複数選択を実装しようとしていますが、これは反応ブートストラップのみを使用しています。出来ますか？主な目的は、ButtonGroupを使用してグリッド内のオブジェクトのフィルタとして使用する複数の選択動作を行うことです。

Answer 1

確かに可能です。 Here's a jsBinは、オプションをトグルする例を示しています（私は自分のアプリケーションに似たものを使いました）。

大まかに言えば、2つのことが必要です。 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'));