twitter-bootstrap - react-bootstrap で「ButtonGroup」のクリックを処理する

Question

ButtonGroupのクリックを処理する正しい方法は何ですか? これが私が試したもので、うまくいかないようです（key印刷された値schemaTypeSelectionHandleは正しくありません）。

<ButtonToolbar>
   <ButtonGroup onClick={this.schemaTypeSelectionHandle.bind(this)}>
     <Button eventKey='1'>Verb</Button>
     <Button eventKey='2'>Wiki Entity</Button>
   </ButtonGroup>
</ButtonToolbar>

次のハンドルを使用します。

schemaTypeSelectionHandle(key) {
    console.log('key: ');
    console.log(key);
}

Answer 1

data-keyボタンに属性を追加します。

<ButtonToolbar>
  <ButtonGroup onClick={this.schemaTypeSelectionHandle.bind(this)}>
    <Button data-key='1'>Verb</Button>
    <Button data-key='2'>Wiki Entity</Button>
  </ButtonGroup>
</ButtonToolbar>

そしてevent.target、要素を取得するために使用します:

schemaTypeSelectionHandle(event) {
  // console.log('key: ', $(event.target).data('key'));
  console.log('key: ', event.target.attributes.getNamedItem('data-key').value);
}