如何从 Typeahead React 多选中删除项目？

Question

在TokenSkill组件中，它添加了onRemove = {props.onRemove}. 但是，对于多选中的元素，没有删除所选元素的交叉。

演示在这里：https : //codesandbox.io/s/74n5rvr75x

import React from "react";

import { render } from "react-dom";

import { Token, tokenContainer, Typeahead } from "react-bootstrap-typeahead";

const styles = {

  fontFamily: "sans-serif",

  textAlign: "center"

};

const TokenSkill = tokenContainer(props => {

  return (

    <div

      {...props}

      onClick={event => {

        event.stopPropagation();

        props.onClickCustom(event);

      }}

      onRemove={props.onRemove}

      className="tokenSkill"

      tabIndex={0}>

      {props.children}

    </div>

  );

});

class App extends React.Component {

  render = () => {

    const options = [

      { id: "house", name: "House" },

      { id: "house2", name: "House2" },

      { id: "house3", name: "House3" }

    ];

    return (

      <Typeahead

        clearButton

        labelKey="name"

        multiple

        allowNew

        onChange={console.log("toot!")}

        options={options}

        placeholder="Choose a state..."

        renderToken={(...args) => this.getSkillEffectToken(...args)}

      />

    );

  };

  getSkillEffectToken = (option, onRemove, index) => {

    return (

      <TokenSkill

        onRemove

        key={index}

        onClickCustom={event => {

          alert("bad! The window still shows");

        }}

      >

        {`${option.name}`}

      </TokenSkill>

    );

  };

}