React：如何点击Map中的单个元素修改样式（仅缩放点击图片）

问题描述 #

需要实现点击图片时仅缩放map方法渲染出的对应单个元素，已知要通过index实现，但不清楚具体操作；希望采用独立函数完成，而非内联onClick传递index的方式。

问题代码：

import './App.css';
import { useSelector, useDispatch } from 'react-redux';
import { useEffect, useState } from 'react';
import { birds, mountains, trees, search } from './features/slices/photoSlice';

function App() {
  const url = useSelector((state)=>state.url)
  const dispatch = useDispatch()

  const [photos, setPhoto] = useState('')
  const [scale, setScale] = useState(false)
  const [photoindex, setPhotoindex] = useState(0)

  useEffect(()=>{
    fetch(url).then(res=>res.json()).then(data=>setPhoto(data))
  },[url])

const handleSearch = (e) =>{
 if(e.key==='Enter'){
  e.preventDefault()
  dispatch(search(e.target.value))
 }
}

const handleClickOnPicture = (e) => {
  if(e){
    setScale(!scale)
  }
}

  return (
    <div className="App">
       {photos?photos.hits.map((photo, index)=>{
        return <img className={scale?'m-5 h-80 scale-125':'m-5 h-80'} onClick={handleClickOnPicture} key={photo.webformatURL} src={photo.webformatURL}/>
       }):""}
    </div>
  );
}

export default App;

解决方案 #

核心思路是用单个状态存储当前需要缩放的元素索引，而非全局布尔值，这样就能精准控制单个元素的样式变化。

修改步骤： #

1. 替换状态：把scale和photoindex合并为一个状态activeScaleIndex，初始值设为null（表示没有元素处于缩放状态）。
2. 更新点击函数：让handleClickOnPicture接收index参数，点击时判断当前索引是否等于activeScaleIndex，如果是就取消缩放（设为null），否则设置为当前索引。
3. 动态判断样式：在className中对比当前元素的index和activeScaleIndex，匹配时应用缩放类。

修改后的完整代码： #

import './App.css';
import { useSelector, useDispatch } from 'react-redux';
import { useEffect, useState } from 'react';
import { birds, mountains, trees, search } from './features/slices/photoSlice';

function App() {
  const url = useSelector((state)=>state.url)
  const dispatch = useDispatch()

  const [photos, setPhoto] = useState('')
  // 用单个状态存储当前缩放的元素索引，初始为null
  const [activeScaleIndex, setActiveScaleIndex] = useState(null)

  useEffect(()=>{
    fetch(url).then(res=>res.json()).then(data=>setPhoto(data))
  },[url])

const handleSearch = (e) =>{
 if(e.key==='Enter'){
  e.preventDefault()
  dispatch(search(e.target.value))
 }
}

// 独立函数接收index参数，控制缩放状态
const handleClickOnPicture = (index) => {
  // 如果点击的是当前已缩放的元素，取消缩放；否则设置为当前元素索引
  setActiveScaleIndex(prevIndex => prevIndex === index ? null : index)
}

  return (
    <div className="App">
       {photos?photos.hits.map((photo, index)=>{
        // 对比当前元素索引和activeScaleIndex，决定是否应用缩放类
        const isScaled = activeScaleIndex === index
        return (
          <img 
            className={isScaled ? 'm-5 h-80 scale-125' : 'm-5 h-80'} 
            onClick={() => handleClickOnPicture(index)} 
            key={photo.webformatURL} 
            src={photo.webformatURL}
          />
        )
       }):""}
    </div>
  );
}

export default App;

关键说明： #

• 点击事件通过箭头函数包裹，将当前元素的index传递给独立的handleClickOnPicture函数，既满足了“独立函数”的需求，又能传递索引参数。
• 状态activeScaleIndex仅记录当前需要缩放的元素索引，渲染时通过对比索引精准控制单个元素的样式，避免了全局状态导致的所有元素一起缩放的问题。
• 点击已缩放的元素时会取消缩放，提升交互体验。

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