twitter-bootstrap - 在react-bootstrap中处理点击 `ButtonGroup`

Question

处理ButtonGroup点击的正确方法是什么？ ？这是我尝试过的，但它似乎不起作用(schemaTypeSelectionHandle 中打印的 key 值不正确)。

<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);
}