19

反応ブートストラップボタンのグループをラジオボタンセットにしようとしています。要素を使用したブートストラップでこれを簡単に行うことができますが<input type="radio">、react-bootstrap でこれを行う方法がわかりません。次のコードは、ユーザーが 1 つだけではなくすべてのボタンを選択できるようにします。

JS:

const operationButtons = (    
  <ButtonGroup>
    <Button active>Radio 1</Button>
    <Button>Radio 2</Button>
  </ButtonGroup>
);

React.render(operationButtons, document.getElementById('operationButtonsDiv'));

HTML:

<div name="operationButtonsDiv" id="operationButtonsDiv" data-toggle="buttons"/>
4

5 に答える 5

21

受け入れられた回答以降、フレームワークが変更され、Bootstrap フレームワークのオプション グループの動作が複製されました。あとは、グループ内の各オプションにグループ名を追加するだけです:

<Radio name="groupOptions">Option 1</Radio>
<Radio name="groupOptions">Option 2</Radio>
<Radio name="groupOptions">Option 3</Radio>
于 2017-01-12T21:11:25.553 に答える
6

そのため、Bootstrap で通常行うようにラジオInputをネストすることになりました。Button

render() {
  return (
    <ButtonGroup>
      <Button active>Radio 1
        <Input ref="input1" type="radio" name="radioButtonSet" value='input1' standalone defaultChecked/>
      </Button>
      <Button>Radio 2
        <Input ref="input2" type="radio" name="radioButtonSet" value='input2' standalone/>
      </Button>
    </ButtonGroup>
  )
}

また、デフォルトの.radiocss をオーバーライドして、表示方法を修正しました。

.radio {
  margin-top: 0;
  margin-bottom: 0;
}

RadioGroupReact-bootstrap は最終的 に実装する予定です: https://github.com/react-bootstrap/react-bootstrap/issues/342

于 2015-07-01T14:54:26.637 に答える
5

私はちょうど同じ問題に遭遇し、コンポーネントの状態を使用して解決しました:

_onOptionChange(option) {
    this.setState({
        option: option
    });
}

render() {
    render (
        <ButtonGroup>
            <Button onClick={this._onOptionChange.bind(this, 'optionA')} active={this.state.option === 'optionA'}>Option A</Button>
            <Button onClick={this._onOptionChange.bind(this, 'optionB')} active={this.state.option === 'optionB'}>Option B</Button>
        </ButtonGroup>
    );
}
于 2015-07-01T14:38:01.657 に答える