React+TypeScript中自定义CC.Chip的增删实现及问题咨询

1. handleKeyDown 事件的正确类型 #

你需要给 KeyboardEvent 指定泛型类型 HTMLInputElement，这样 TypeScript 才能识别事件目标是输入框，从而允许访问 target.value。默认的 KeyboardEvent 类型里，target 是 EventTarget | null，类型范围太宽泛，所以无法直接获取 value。

示例代码：

const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
  // 可以安全访问 value，也可以加非空断言处理边界情况
  const inputValue = e.target?.value.trim();
  if (e.key === 'Enter' && inputValue) {
    setTags(prev => [...prev, inputValue]);
    e.target.value = ''; // 清空输入框
  }
};

2. 通过 CC.Chip 的 onClose 删除对应标签 #

渲染标签时，给每个 CC.Chip 的 onClose 绑定专属回调，传入当前标签的索引或值，再通过过滤数组的方式更新标签列表（注意不要直接修改原数组，必须用 React 状态更新的方式）。

方法一：通过索引删除（适合标签可能重复的场景） #

const handleDeleteTag = (index: number) => {
  setTags(prevTags => prevTags.filter((_, idx) => idx !== index));
};

// 渲染 Chips 的部分
{tags.map((tag, index) => (
  <CC.Chip
    key={index}
    label={tag}
    onClose={() => handleDeleteTag(index)}
  />
))}

方法二：通过标签值删除（适合标签唯一的场景） #

const handleDeleteTag = (tagToRemove: string) => {
  setTags(prevTags => prevTags.filter(tag => tag !== tagToRemove));
};

// 渲染 Chips 的部分
{tags.map(tag => (
  <CC.Chip
    key={tag}
    label={tag}
    onClose={() => handleDeleteTag(tag)}
  />
))}

注意：如果标签可能重复，建议用索引作为 key 和删除依据；如果标签唯一，用标签值作为 key 更合理。

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