React中禁用Enter键触发evergreen-ui的TagInput创建标签，改为失焦创建

问题根源 #

Evergreen UI的TagInput组件顶层的onKeyDown事件并非绑定到内部输入框元素，而是组件容器的事件。你直接在TagInput上绑定的handleKeyDown无法拦截输入框的回车键事件，导致默认创建标签的行为依然触发。

修复方案 #

1. 将回车键拦截逻辑移到inputProps中，确保事件绑定到实际输入框
2. 在onBlur事件中手动处理标签创建逻辑，替代回车键的默认行为

修改后的完整代码 #

const createPlaceholder = (arr) => {
  return arr > 0 ? { placeholder: '' } : { placeholder: 'Enter tag' };
};

const [tagProps, setTagProps] = useState(createPlaceholder(task?.labels?.length));

const handleChangeLabels = (values) => {
  const arr = values.map(v => ({ id: null, task: null, value: v }));
  const processedArr = arr.length ? [arr[0]] : [];
  handleChangeAttribute(processedArr, 'labels');
  setTagProps(createPlaceholder(processedArr.length));
};

const handleChangeAttribute = (value, attr) => {
  const res = { ...task };
  res[attr] = value?.trim?.() === '' ? '' : value;
  setTask(res);
};

// 拦截输入框的回车键事件
const handleInputKeyDown = (event) => {
  if (event.key === 'Enter') {
    event.preventDefault();
    event.stopPropagation(); // 阻止事件冒泡到组件内部逻辑
  }
};

// 失去焦点时手动创建标签
const handleBlur = (event) => {
  const inputValue = event.target.value.trim();
  if (inputValue) {
    // 调用onChange逻辑添加标签
    handleChangeLabels([...(task?.labels?.map(l => l.value) || []), inputValue]);
    // 清空输入框
    setTagProps(prev => ({ ...prev, value: '' }));
  }
};

<TagInput
  inputProps={{
    ...tagProps,
    onKeyDown: handleInputKeyDown // 将按键事件绑定到内部输入框
  }}
  values={task?.labels?.map(l => l.value) || []}
  onChange={handleChangeLabels}
  onBlur={handleBlur}
/>

关键修改点说明 #

• 移onKeyDown到inputProps：让事件直接绑定到TagInput内部的输入框元素，同时通过event.stopPropagation()防止事件被组件内部逻辑捕获，彻底拦截回车键的默认行为。
• 完善onBlur逻辑：手动获取输入框内容，去除空格后若有有效内容，调用标签添加逻辑并清空输入框，实现失焦创建标签的需求。
• 统一函数名：修正原代码中onChange绑定函数名不一致的问题，确保逻辑正常触发。

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