MUI Autocomplete回车时如何将空格分隔内容生成多个标签？

可以实现该需求，核心逻辑是拦截回车默认事件，拆分输入的空格分隔内容后批量更新选中值，具体实现如下：

基础依赖配置 #

需要先开启Autocomplete的两个核心属性：

• multiple：开启多标签选择模式
• freeSolo：允许输入不在预设选项列表中的自定义值

核心逻辑实现 #

重写输入框的onKeyDown事件，拦截回车触发的默认行为，对输入内容做分割处理：

1. 按下回车键时先阻止默认的单标签生成逻辑
2. 将当前输入框内容按任意空白字符分割，过滤空字符串避免生成无效标签
3. 合并已有选中值并去重后更新状态
4. 清空输入框内容

完整代码示例 #

import React, { useState } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

export default function SplitTagAutocomplete() {
  // 已选中的标签列表
  const [selectedTags, setSelectedTags] = useState([]);
  // 预设选项列表，可替换为业务侧实际选项
  const presetOptions = [];

  const handleInputKeyDown = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      const rawInput = e.target.value.trim();
      if (!rawInput) return;

      // 按任意空白字符分割输入内容，过滤空值
      const newTagList = rawInput.split(/\s+/).filter(tag => tag.trim().length > 0);
      // 合并已有标签并去重
      const updatedTags = [...new Set([...selectedTags, ...newTagList])];
      setSelectedTags(updatedTags);
      // 清空输入框
      e.target.value = '';
    }
  };

  return (
    <Autocomplete
      multiple
      freeSolo
      options={presetOptions}
      value={selectedTags}
      onChange={(_, newValue) => setSelectedTags(newValue)}
      renderInput={(params) => (
        <TextField
          {...params}
          label="多标签输入"
          variant="outlined"
          onKeyDown={handleInputKeyDown}
        />
      )}
    />
  );
}

可选优化项 #

• 如果需要限制输入内容的格式，可在分割完成后增加正则校验逻辑，过滤不符合规则的项再更新状态
• 如果需要实现粘贴后自动分割生成标签，可额外监听输入框的onPaste事件，读取粘贴板内容后执行和回车事件相同的分割、更新逻辑即可

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