如何使用React-bootstrap将FormControl用于多选？

Question

我是Reactjs的新手。我正在尝试通过表单控件使用多选。

下面是我的代码：

handleIds(e){
  let id = null;
  if(e.target.value) {
    id = parseInt(e.target.value, 10);
  } else {
    id = null
  }
  this.state.Ids.push(id);
}

<FormGroup controlId="formQueryIds"
  validationState = {this.validateNotEmpty(this.state.queryIds)}>
 <ControlLabel>Query Ids</ControlLabel>
  {this.loadQueries()}
 <FormControl componentClass="select"
   placeholder="Select ids"
   onChange={this.handleIds}
   multiple>
  {this.state.items.map((item) => <option key={item.id}>{item.id}</option>)}
 </FormControl>
 <FormControl.Feedback />
</FormGroup>

这里的项目是一个ID数组，可动态提供选项值。

这里的问题是：对于每个选项的选择，它都会触发handleIds并将值添加到数组Ids []中。

但是当我们取消选择已经选择的选项时，我将无法触发handleIds并从数组中删除该值。

是否有一种方法可以设计为在未选择值时立即从数组中删除值，或者代替触发每个选择的handleIds，仅触发一次并将所有选择的值作为数组提供的方法？