Question

我正在使用多令牌配置，我想创建一个自定义令牌，所以我只是扩展tokenContainer，如文档所示：

const TokenSkill = tokenContainer(props => {
    return <div
      onClick={(event) => {
          event.stopPropagation();
          props.onClickCustom(event);
      }}
      className="tokenSkill">{props.children}
      <span onClick={() => props.onRemove()}
    ><i className="fa fa-times crossButton" /></span>
    </div>
});

我希望在点击令牌时显示一些数据。我已经实现了我的onClick版本。但每当我点击它时，过滤器面板会显示。在点击过滤器框时似乎抓住了同一个事件。

我已将此codeSandbox创建为示例https://codesandbox.io/s/o9r23yklq9 如果您搜索令牌（尝试使用“house”）并将其添加到列表中，当您单击令牌时，它将显示筛选器列表以及警报。它应该只在单击过滤器列表上的空白区域时显示该列表

Answer 1

您的代码存在两个问题：

您没有将所有tokenContainer道具传递给自定义令牌。这些道具中有一个onFocus处理程序，可以阻止点击传播到父节点，即：输入。
由于您使用div作为包含元素，因此您需要为令牌设置tabIndex以保持焦点。

以下内容应该有效：

const TokenSkill = tokenContainer(props => {
  return (
    <div
      {...props}
      onClick={(event) => {
        event.stopPropagation();
        props.onClickCustom(event);
      }}
      className="tokenSkill"
      tabIndex={0}>
      {props.children}
      <span onClick={() => props.onRemove()}>
        <i className="fa fa-times crossButton" />
      </span>
    </div>
  );
});

这是一个工作沙箱：https://codesandbox.io/s/74n5rvr75x

使用react-bootstrap-typeahead单击自定义标记时，请避免列表打开

1 个答案: