React项目中如何为Material-UI Chip组件添加删除按钮？

下面是针对你的需求的完整实现方案，结合Material-UI的Chip组件特性，一步一步实现带删除按钮的邮箱标签功能：

完整代码示例 #

import React, { useState } from 'react';
import Chip from '@mui/material/Chip';
import TextField from '@mui/material/TextField';
import CloseIcon from '@mui/icons-material/Close';

const EmailTagInput = () => {
  // 管理已添加的邮箱列表和输入框内容
  const [emails, setEmails] = useState([]);
  const [inputValue, setInputValue] = useState('');

  // 回车时添加邮箱
  const handleKeyPress = (e) => {
    const trimmedEmail = inputValue.trim();
    if (e.key === 'Enter' && trimmedEmail) {
      // 避免重复添加相同邮箱
      if (!emails.includes(trimmedEmail)) {
        setEmails([...emails, trimmedEmail]);
        setInputValue('');
      }
    }
  };

  // 删除指定邮箱
  const handleDeleteTag = (targetEmail) => {
    setEmails(emails.filter(email => email !== targetEmail));
  };

  return (
    <div style={{ margin: '20px', display: 'flex', flexWrap: 'wrap', gap: '8px', alignItems: 'center' }}>
      {/* 渲染已添加的邮箱标签 */}
      {emails.map((email, index) => (
        <Chip
          key={index}
          label={email}
          deleteIcon={<CloseIcon />}
          onDelete={() => handleDeleteTag(email)}
          variant="outlined"
        />
      ))}
      {/* 邮箱输入框 */}
      <TextField
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        onKeyPress={handleKeyPress}
        placeholder="输入邮箱按回车添加"
        size="small"
      />
    </div>
  );
};

export default EmailTagInput;

关键知识点说明 #

1. 利用Chip组件自带属性
   Material-UI的Chip组件原生支持deleteIcon和onDelete两个属性：

   • deleteIcon：传入图标组件（示例用了官方的CloseIcon）作为删除按钮
   • onDelete：绑定删除逻辑，点击删除图标时触发

2. 状态管理核心

   • 用useState维护两个状态：emails存储已添加的邮箱数组，inputValue存储输入框实时内容
   • 删除操作通过filter方法过滤掉目标邮箱，更新emails数组即可自动刷新UI

3. 新手注意事项

   • 如果没安装Material-UI图标包，先执行命令：npm install @mui/icons-material
   • 示例中用index作为Chip的key是简化写法，实际项目中如果邮箱可能重复，建议用邮箱+时间戳生成唯一key避免渲染警告
   • 可以通过style或Material-UI的sx属性调整标签和输入框的布局样式

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