如何在用户按下#键后捕获其后续按键，按下空格键时停止并提取对应标签

第一步：调整组件初始状态 #

你原有代码中tags、currentTag是事件函数的局部变量，每次按键触发都会被重置，无法跨按键保留状态，需要先将相关状态存入组件state：

// 组件初始化state
state = {
  inputValue: '', // 存储用户全部输入内容
  isRecordingTag: false, // 标记是否正在录入标签
  currentTag: '', // 存储正在录入的标签内容
  tags: [], // 存储所有已确认的标签
  notes: [] // 原有的笔记列表
}

同时要给输入框绑定value为this.state.inputValue，实现受控组件，避免状态不同步。

第二步：补全onKeyDown事件逻辑 #

完整的事件处理逻辑如下：

onKeyDown = (e) => {
  // 先实时更新输入框的完整内容
  const newInputValue = e.target.value + e.key;
  this.setState({ inputValue: newInputValue });

  const { isRecordingTag, currentTag, tags } = this.state;

  // 处理回车提交逻辑
  if (e.key === "Enter") {
    e.preventDefault(); // 阻止输入框换行
    this.setState((state) => {
      // 可选：如果提交时还在录入标签，自动把未完成的标签也加入列表
      let finalTags = [...state.tags];
      if (state.isRecordingTag && state.currentTag.trim()) {
        finalTags.push(state.currentTag.trim());
        finalTags = [...new Set(finalTags)]; // 标签去重
      }
      const item = this.createNote(state.inputValue, finalTags);
      // 提交后清空输入相关状态
      return {
        notes: [...state.notes, item],
        inputValue: '',
        isRecordingTag: false,
        currentTag: '',
        tags: []
      };
    });
    return;
  }

  // 处理标签录入逻辑
  if (e.key === "#") {
    this.setState({
      isRecordingTag: true,
      currentTag: ''
    });
    return;
  }

  // 如果正在录入标签
  if (isRecordingTag) {
    // 按下空格，结束当前标签录入
    if (e.key === " ") {
      if (currentTag.trim()) { // 排除空标签
        const newTags = [...new Set([...tags, currentTag.trim()])]; // 自动去重
        this.setState({
          tags: newTags,
          isRecordingTag: false,
          currentTag: ''
        });
      }
      return;
    }

    // 按下退格键，删除标签的最后一个字符
    if (e.key === "Backspace") {
      this.setState(prev => ({
        currentTag: prev.currentTag.slice(0, -1)
      }));
      return;
    }

    // 普通字符，追加到当前标签
    if (e.key.length === 1) { // 过滤shift、ctrl等功能键
      this.setState(prev => ({
        currentTag: prev.currentTag + e.key
      }));
    }
  }
};

注意事项 #

• 代码默认对标签做了去重处理，重复输入同一个标签只会保存一次
• 可自行调整是否要在回车提交时自动保存未打完（没按空格结束）的标签
• 现有逻辑已经支持自动识别多个连续标签，比如#foo #bar的场景
• 如果不需要受控组件，可以去掉inputValue的状态同步，提交时直接取e.target.value即可

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