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

Answer 2

value为按钮添加属性：

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

并用于event.target.value获取值：

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