MUI Chip组件onAdd属性移除后的等效实现方案咨询

没错，MUI最新版本里确实移除了Chip组件的onAdd属性，要实现根据用户输入创建新Chip的需求，你可以结合状态管理和输入组件自己手动实现，核心是通过监听输入事件触发添加逻辑，具体步骤如下：

核心实现思路 #

用React的状态管理已创建的Chip列表，搭配输入框（比如TextField）捕获用户输入，在用户触发确认操作（比如回车、点击按钮）时，将输入内容添加到Chip列表状态中，同时渲染对应的Chip组件。

具体代码示例 #

import { useState } from 'react';
import { Chip, TextField, Box } from '@mui/material';

export default function DynamicChipCreator() {
  // 管理已有的Chip列表和当前输入值
  const [chips, setChips] = useState([]);
  const [inputValue, setInputValue] = useState('');

  // 处理Chip删除逻辑
  const handleDelete = (chipToDelete) => () => {
    setChips(chips.filter((chip) => chip !== chipToDelete));
  };

  // 处理输入框回车添加Chip
  const handleKeyDown = (event) => {
    if (event.key === 'Enter' && inputValue.trim()) {
      // 避免重复添加相同标签
      if (!chips.includes(inputValue.trim())) {
        setChips([...chips, inputValue.trim()]);
        setInputValue(''); // 清空输入框
      }
    }
  };

  return (
    <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', alignItems: 'center', p: 2 }}>
      {/* 渲染已有的Chip */}
      {chips.map((chip) => (
        <Chip key={chip} label={chip} onDelete={handleDelete(chip)} />
      ))}
      {/* 输入框用于新增标签 */}
      <TextField
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        onKeyDown={handleKeyDown}
        placeholder="输入标签按回车添加"
        size="small"
      />
    </Box>
  );
}

额外优化建议 #

• 输入验证：可以添加更多验证规则，比如限制标签长度、禁止特殊字符等
• 自定义触发方式：除了回车，还可以添加一个按钮，点击按钮触发添加逻辑
• 样式调整：根据需求修改Chip和输入框的布局、样式，比如让输入框和Chip对齐更协调

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