Javascript 如何使用ReactJs切换元素的类

我需要在单击列表中的一个图像时切换一些css效果（但仅在单击的图像中）。我这样做了，但不起作用

我尝试使用“classList.toggle（'selected'）”来实现它，但是css没有改变。我不知道是否有一些方法可以用“useState”来实现

我正在学习reactjs，我希望有人能帮助我

反应

const Photos = () =>{

  const[mainPhoto, setMainPhoto] = useState(Barco)

  const changePhoto = (element) => {
    setMainPhoto(element.target.src)
    let target = element.currentTarget;
    target.classList.toggle('selected')
  }

  return(
      <section className={styles.sectionContainer}>
        <div className={styles.imgContainer}>
          <img src={mainPhoto}/>
        </div>
        <div className={styles.titleContainer}>
          <div className={styles.infoArea}>
            <h1>LOren </h1>
            <p className={styles.resume}>LOren</p>
            <p className={styles.about}>LOren LOren LOren LOrenLOrenLOrenLOren LOrenLOren LOren LOren LOren LOrenLOren
            LOren LOrens
            </p>
            <h2>Fotografia:</h2>
            <ul>
              <li>User 01</li>
              <li>User 02</li>
            </ul>
          </div>
          <div className={styles.photoArea}>
            <div>
              <img onClick={ (e) => changePhoto(e)} src={Surf}/>
              <img onClick={ (e) => changePhoto(e)} src={Barco}/>
              <img onClick={ (e) => changePhoto(e)} src={Barco}/>
              <img onClick={ (e) => changePhoto(e)} src={Barco}/>
              <img onClick={ (e) => changePhoto(e)} src={Barco}/>
              <img onClick={ (e) => changePhoto(e)} src={Barco}/>
              <img onClick={ (e) => changePhoto(e)} src={Barco}/>
              <img onClick={ (e) => changePhoto(e)} src={Barco}/>
              <img onClick={ (e) => changePhoto(e)} src={Barco}/>
              <img onClick={ (e) => changePhoto(e)} src={Barco}/>
              <img onClick={ (e) => changePhoto(e)} src={Barco}/>
            </div>
          </div>
        </div>
      </section>
  )
}

export default Photos

---

您绝对应该使用和更改状态来引起对DOM的更改。在React中，切勿使用本机DOM方法，如

classList.toggle

对于这种情况，请使用选定图像索引的数字索引状态。首先有一个src数组，例如

const srcs = [Surf, Barco, ...]

然后使用单击处理程序映射它们，该处理程序使用迭代索引来决定如何更改处于状态的选定索引：

const [indexSelected, setIndexSelected] = useState(-1);
const handleClick = i => () => {
  setIndexSelected(i === indexSelected ? -1 : indexSelected);
};
// ...
  <div className={styles.photoArea}>
    <div>
      {
        srcs.map((src, i) => <img
          onClick={handleClick(i)}
          className={i === indexSelected ? 'selected' : ''}
          src={src}
        />)
      }
    </div>

const[indexSelected，setIndexSelected]=useState（-1）；
常量handleClick=i=>（）=>{
setIndexSelected（i==indexSelected？-1:indexSelected）；
};
// ...
{
srcs.map（（src，i）=>）
}

我通过做一些更改使它工作起来

反应

const照片=（）=>{
const[mainPhoto，setMainPhoto]=useState（Barco）
const[selected，setSelected]=useState（0）
常量changePhoto=（元素，索引）=>{
setMainPhoto（element.target.src）
已选数据集（索引）
}
const images=[Barco，Surf]
返回(
罗兰
LOren
LOren LOren LOren LOren LOren LOren LOren
洛伦洛伦斯

福托格拉菲亚：

多纳达酒店
吉勒姆·多纳达

{images.map（（图像，索引）=>）
))}
)
}
导出默认照片

首先，感谢您的回答。我试过你的代码但没用。很高兴知道我应该用“状态”来做。。。。所以，我会试着做点什么。你说“没用”是什么意思？你能解释一下你遇到的问题是什么吗？我必须做一些改变才能让它正常工作。但是你的回答对我帮助很大。我将在这里发布我所做的。再次感谢。

const [indexSelected, setIndexSelected] = useState(-1);
const handleClick = i => () => {
  setIndexSelected(i === indexSelected ? -1 : indexSelected);
};
// ...
  <div className={styles.photoArea}>
    <div>
      {
        srcs.map((src, i) => <img
          onClick={handleClick(i)}
          className={i === indexSelected ? 'selected' : ''}
          src={src}
        />)
      }
    </div>

const Photos = () =>{

  const[mainPhoto, setMainPhoto] = useState(Barco)
  const[selected, setSelected] = useState(0)

  const changePhoto = (element, index) => {
    setMainPhoto(element.target.src)
    setSelected(index)
  }

  const images = [Barco, Surf]

  return(
      <section className={styles.sectionContainer}>
        <div className={styles.imgContainer}>
          <img src={mainPhoto}/>
          <button className={styles.previous} >
            <GrPrevious size={24} />
          </button>
          <button className={styles.next}>
            <GrNext size={24}/>
          </button>
        </div>
        <div className={styles.titleContainer}>
          <div className={styles.infoArea}>
            <h1>LOren </h1>
            <p className={styles.resume}>LOren</p>
            <p className={styles.about}>LOren LOren LOren LOrenLOrenLOrenLOren LOrenLOren LOren LOren LOren LOrenLOren
            LOren LOrens
            </p>
            <h2>Fotografia:</h2>
            <ul>
              <li>Guilherme Donada</li>
              <li>Guilherme Do nada</li>
            </ul>
          </div>
          <div className={styles.photoArea}>
            <div>
            {images.map((image,index) => (              
              <img 
                key={index}
                onClick={ (e) => changePhoto(e, index)}  
                src={image} 
                className={ index == selected ? styles.selected : '' }
              />
            ))}
            </div>
          </div>
        </div>
      </section>
  )
}

export default Photos