reactjs React gallery应用程序,我想单独添加标签到一个图像，但标签被添加到所有图像,我该如何解决这个问题？

cgvd09ve 于 2022-11-04 发布在 React

关注(0)|答案(1)|浏览(178)

〉这是我的库组件

import React, {useState} from 'react';
import useFirestore from '../hooks/useFirestore';
import { motion } from 'framer-motion';

const Gallery = ({ setSelectedImg }) => {
  const { docs } = useFirestore('images');

这里我将状态设置为Tags数组

const [tags, setTags] = useState([""]);

  const addTag = (e) => {
    if (e.key === "Enter") {
      if (e.target.value.length > 0) {
        setTags([...tags, e.target.value]);
        e.target.value = "";
      }
    }
  };

用于添加和删除标记的函数

const removeTag = (removedTag) => {
    const newTags = tags.filter((tag) => tag !== removedTag);
    setTags(newTags);
  };

  return (
    <>

      <div className="img-grid">
      {docs && docs.map(doc => (

        < motion.div className="img-wrap" key={doc.id} 
          layout
          whileHover={{ opacity: 1 }}s
          onClick={() => setSelectedImg(doc.url)}
        >

这里我添加标签输入到每个图像...问题是，当添加一个标签被添加到所有的图片。我想添加标签的图像，我选择。

<div className="tag-container">
        {tags.map((tag, ) => {
          return (
            <div key={doc.id} className="tag">
              {tag} <span onClick={() => removeTag(tag)}>x</span>
            </div>
          );
        })}

        <input onKeyDown={addTag} />
      </div>
          <motion.img src={doc.url} alt="uploaded pic"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 1 }}
          >

          </motion.img>

        </motion.div>

      ))}
    </div>  

    </>
  )
}

export default Gallery;

reactjs

来源：https://stackoverflow.com/questions/74267294/react-gallery-app-i-want-add-tags-to-an-image-individually-but-the-tag-is-being

1条答案

按热度按时间

eeq64g8w1#

你用来存储用户输入的值的tags数组对于每个image item来说不是唯一的。
1.创建一个对象，用于存储每个图像的标记数组：
const [tagsObj, setTagsObj] = {}，然后在为image_1添加新标签时，您可以简单地执行setTagsObj(prevObj => {...prevObj, image_1: [...prevObj?.image_1, newTagValue]}，
1.或者创建一个Image组件，然后处理单个图像的标记：
图库组件：

{
    imageList.map(imageEl => 
          <ImageItem key={imageEl} image={imageEl} />
        )

}

映像项组件：

import {useState} from 'react';

export default function ImageItem({image}) {
const [tags, setTags] = useState([]);

const addTag = (e) => {
    if (e.key === "Enter") {
      const newVal = e.target.value;
      if (newVal.length > 0) {
        setTags(prevTags => [...prevTags, newVal]);
        e.target.value = '';
      }
    }
  };

const removeTag = (removedTag) => {
    setTags(prevTags => prevTags.filter((tag) => tag !== removedTag));
  }

  return (    
    <div style={{margin: '12px', padding: '12px', width: '100px', height:'100px', display:'flex', flexDirection: 'column', alignItems:'center'}}>
      <span>{image}</span>
      {tags.map((tag, index) => {
          return (
            <div key={tag+index}>
              {tag} <span onClick={() => removeTag(tag)}>x</span>
            </div>
          );
        })}
        <input onKeyDown={addTag} />
    </div>
  );
}

请参考此沙盒（如果可用），以方便使用Gallery unique image tags sandbox
我建议使用第二种方法，因为它很容易理解和调试。
我希望这有帮助，如果有帮助，请接受答案！

赞(0）回复(0）举报 2022-11-04

我来回答

reactjs React gallery应用程序,我想单独添加标签到一个图像，但标签被添加到所有图像,我该如何解决这个问题？

1条答案

相关问题

热门标签

最新问答