反应中的文本旁边的图标-选择多标签

.tag {
  display: flex;
  align-items: center;
}

.tag-icon {
  margin-right: 8px; /* 调整间距 */
}

.tag-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

const [selectedTags, setSelectedTags] = useState([]);

const handleTagClick = (tag) => {
  if (selectedTags.includes(tag)) {
    setSelectedTags(selectedTags.filter(t => t !== tag));
  } else {
    setSelectedTags([...selectedTags, tag]);
  }
};

import React, { useState } from 'react';

const TagSelector = ({ tags }) => {
  const [selectedTags, setSelectedTags] = useState([]);

  const handleTagClick = (tag) => {
    if (selectedTags.includes(tag)) {
      setSelectedTags(selectedTags.filter(t => t !== tag));
    } else {
      setSelectedTags([...selectedTags, tag]);
    }
  };

  return (
    <div>
      {tags.map(tag => (
        <div
          key={tag}
          className={`tag ${selectedTags.includes(tag) ? 'selected' : ''}`}
          onClick={() => handleTagClick(tag)}
        >
          <span className="tag-icon">🔖</span>
          {tag}
        </div>
      ))}
    </div>
  );
};

export default TagSelector;

.tag {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid #ccc;
  margin: 4px;
  cursor: pointer;
}

.tag.selected {
  background-color: #e0e0e0;
}

.tag-icon {
  margin-right: 8px;
}