如何使用 ReactJs 切換元素的 class

Question

當單擊列表中的一個圖像時（但僅在單擊的圖像中），我需要切換一些 css 效果。 我這樣做了，但沒有工作。

我正在嘗試使用“classList.toggle('selected')”來做到這一點，但 css 沒有改變。 我不知道是否有某種方法可以使用“useState”來做到這一點。

我正在學習reactjs，希望有人能幫忙。

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

SCSS

img {
  height: 100%;
  width: 100%;
  cursor: pointer;
  object-fit: cover;

  &:hover {
    filter: blur(1px);
  }

  &.selected {
    border: 1px solid black;
  }

}      

Answer 1

您絕對應該使用和更改 state 以導致對 DOM 的更改。 在 React 中，永遠不要使用像classList.toggle這樣的原生 DOM 方法。

對於這種情況，請使用所選圖像索引的數字索引 state。 首先有一個src數組，例如

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

然后 map 覆蓋它們，點擊處理程序使用迭代索引來決定如何更改 state 中的選定索引：

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>

Answer 2

我通過做一些改變使它工作。

反應

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