javascript 使用处理函数将数组中元素的索引更新为零

ao218c7q 于 2023-03-21 发布在 Java

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

我想在数组中选择一个图像的索引，在单击它时将其设置为零。
为了简单起见，我有图像1（index == 0）和图像2（index == 1）。当我点击图像2时，handleImageClick函数通过将图像2的索引设置为零来工作。问题是，为了将图像1的索引再次设置为零，我必须第二次点击图像2，这是没有意义的。为什么会出现这种逻辑错误？
下面是我的handleImageClick函数：

const handleImageClick = (index) => {
      const newImages = [...images];
      const clickedImage = newImages[index];
      newImages.splice(index, 1);
      newImages.unshift(clickedImage);
      setImages(newImages);
    };

以下是图像的显示方式以及onClick的放置位置：

<Grid templateColumns="repeat(3, 1fr)" gap={4} mt={4}>
          {urls.map((url, index) => (
            <Box 
            className="img-container" 
            key={index} 
            position="relative" 
            onClick={() => handleImageClick(index)}
            
            >
              <Image 
                maxHeight="125px" 
                maxW="180px" 
                src={url} 
              />
              <IconButton
                aria-label="Delete"
                icon={<DeleteIcon />}
                onClick={() => handleDeleteImage(index)}
                size="sm"
                colorScheme="red"
                position="absolute"
                top="5px"
                right="5px"
              />
            </Box>
          ))}
        </Grid>

urls.map 是一个临时blob url数组，允许用户查看其图像的预览。
任何帮助都将不胜感激。谢谢。

JavaScript

来源：https://stackoverflow.com/questions/75777355/updating-an-elements-index-in-an-array-to-zero-with-a-handler-function

1条答案

按热度按时间

gab6jxml1#

splice()方法提取指定索引的数组元素，并返回一个提取了元素的数组。在这种情况下，您只需要提取一个元素并将其传递到数组的前端（index 0）
尝试以下代码片段：

let images = [
  {url: "some url", id: "🤡"}, 
  {url: "some url", id: "🙀"}, 
  {url: "some url", id: "👾"},
  {url: "some url", id: "💩"}
]

const handleImageClick = (index) => {
  let img = images.splice(index, 1)  
  images = [...img, ...images]
  console.log(images)
}

Change the index to zero: 
<button onClick="handleImageClick(0)">img (index 0)</button>
<button onClick="handleImageClick(1)">img (index 1)</button>
<button onClick="handleImageClick(2)">img (index 2)</button>
<button onClick="handleImageClick(3)">img (index 3)</button>

赞(0）回复(0）举报 2023-03-21

我来回答

javascript 使用处理函数将数组中元素的索引更新为零

1条答案

相关问题

热门标签

最新问答