为Multi Input组件的Del Keyboard添加至少保留一个Token的限制

我来帮你搞定这个Del键删除全部Token的问题！核心就是给Del键的删除逻辑加上和X按钮一样的「至少保留一个Token」判断，具体实现思路和步骤如下：

核心思路 #

当用户按下Del键时，先检查当前组件内的Token数量：如果只剩最后一个，就阻止删除行为；如果数量大于1，正常执行删除逻辑。

具体实现步骤 #

• 第一步：给Multi Input组件（或其内部的输入区域）绑定键盘事件监听，重点捕获Backspace（也就是你说的Del删除键）
• 第二步：在事件处理函数中，获取当前已存在的Token总数
• 第三步：判断如果Token数量等于1，直接阻止事件的默认行为，避免最后一个Token被删除

代码示例（以React为例，逻辑通用） #

const handleKeyDown = (e) => {
  // 精准捕获Backspace删除键
  if (e.key === 'Backspace') {
    const tokenCount = tokens.length;
    // 只剩最后一个Token时，阻止删除
    if (tokenCount === 1) {
      e.preventDefault();
      // 可选：给用户提示，比如弹出小提示告知不能删完
      alert('至少需要保留一个Token哦');
    }
  }
};

// 将事件绑定到Multi Input的容器上
return (
  <div className="multi-input-wrapper" onKeyDown={handleKeyDown}>
    {/* 你的Token列表、输入框等组件内容 */}
  </div>
);

额外优化建议 #

如果你用的是现成UI组件库（比如Antd的Select[mode="tags"]），可以直接利用组件自带的删除回调钩子，逻辑更贴合组件原生行为：

const handleTokenRemove = (targetToken) => {
  if (tokens.length === 1) {
    // 返回false阻止组件执行删除操作
    return false;
  }
  // 正常删除逻辑
  setTokens(tokens.filter(token => token !== targetToken));
};

另外要注意：确保键盘事件只在Multi Input组件获得焦点时生效，避免干扰页面其他输入框的正常操作。

这样调整后，Del键就会和X按钮一样遵守「不可删除全部Token」的限制啦！

内容的提问来源于stack exchange，提问作者simon