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

Question

在 TokenSkill 组件中，它添加了 onRemove = {props.onRemove}。但是，在multiselect中有一个元素，没有删除选中元素的叉号。

此处演示：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>
    );
  };
}

Answer 1

代码已更新并引用您源代码的工作克隆 - https://codesandbox.io/s/lively-cherry-7kpui

您似乎在对齐全局清除所有数据 (X) 时遇到了一些 CSS 问题，此外您没有正确地将 tabIndex 和 onClick 数据的数据传递给 TokenSkill 方法，您的代码已更新请验证并提供反馈

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 => {
  console.log("2", props);
  return (
    <div
      {...props}
      onClick={event => {
        event.stopPropagation();
        props.onClickCustom(event);
      }}
      tabIndex={props.key}
      className={"tokenSkill"}
    >
      {props.children}
      <button aria-label="Clear" class="close rbt-close" type="button">
        <span aria-hidden="true">×</span>
        <span class="sr-only">Clear</span>
      </button>
    </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
        onChange={console.log("toot!")}
        options={options}
        placeholder="Choose a state..."
        renderToken={(...args) => this.getSkillEffectToken(...args)}
      />
    );
  };

  getSkillEffectToken = (option, onRemove, index) => {
    console.log(onRemove);
    return (
      <TokenSkill
        key={index}
        onClickCustom={evt => {
          onRemove(evt);
          // alert("bad! The window still shows");
        }}
      >
        {`${option.name}`}
      </TokenSkill>
    );
  };
}

render(<App />, document.getElementById("root"));

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

How remove an item from the Typeahead React multiselect?

javascript

reactjs

typeahead.js

bootstrap-typeahead