Question

如何影响列表中一个元素的状态？当前，onClick正在将“ selected”类应用于所有列表元素。

JSX

import React, { useState } from 'react'

export default () => {
    const [showPhoto, setShowPhoto] = useState(false)

    return (
        <ul>
            {photos.map(photo => (
                <li className={showPhoto ? 'selected' : ''} onClick={() => setShowPhoto(!showPhoto)}>
                    <img />
                </li>
            ))}
        </ul>
    )
}

SASS

li
    ...
    img
        ...
    &.selected
        ...
        img
            ...

Answer 1

要解决此问题，我需要对className应用一个条件键，并通过showPhoto侦听器将'key'值分配给onClick变量，如下所示。

<ul>
    {photos.map(photo => (
        <li
            className={showPhoto === photo.id ? style.show : ''}
            onClick={() => setShowPhoto(showPhoto === false ? photo.id : false)}
        >
            <img />
        </li>
    ))}
</ul>

Answer 2

我将如何为您的列表项创建单独的reactNode并单击此处。因为现在您只是在数组中的每个项目上添加类。

const ParentNode=()=>(
  <ul/>
    {arrayOfSomething.map((something,idx)=>
      <key={something+idx}childNode/>
    )}
  </ul>)

//然后

const ChildNode =()=>{
  const[isShow, setIsShow]=useState(false)
  return(
    <li onClick={()=>setIsShow(!isShow)}>
      {isShow?something : something else}
    </li>
  )
}

如何影响列表中单个元素的Gatsby / React useState

2 个答案: