如何在反應 js 中正確使用 Onclick 和 function？

Question

嘿，我有以下問題，當我單擊按鈕時，它們不會 go 到您的 function。 我不明白出了什么問題。

代碼：

import { useEffect, useState, useRef } from 'react';
import './feed.css';
import esquerda from '../../img/esquerda.png'
import image1 from '../../img/sagwabooks-carrossel-1.jpeg'
import image2 from '../../img/sagwabooks-carrossel-2.jpeg'

const Feed = () => {
  const carousel = useRef(null);

  const handleLeftClick = (e) => {
    console.log("entrou")
    e.preventDefault();
    carousel.current.scrollLeft -= carousel.current.offsetWidth;
  };

  const handleRightClick = (e) => {
    console.log("entrou2")
    e.preventDefault();

    carousel.current.scrollLeft += carousel.current.offsetWidth;
  };


  return (
    <div className="container">
      <div className="logo">
      </div>
      <div className="carousel" ref={carousel}>
        
        <div className="item" key={1}>
            <div className="image">
            <img src={image1} alt="image1" />
            </div>
        </div>

        <div className="item" key={2}>
            <div className="image">
            <img src={image2} alt="image2"/>
            </div>
        </div>
    </div>

     <div className="buttons-left">
        <button onClick={handleLeftClick}>
          <img className="img-esquerda" src={esquerda} alt="Scroll Left" />
        </button>
    </div>
    <div className="buttons-right">
        <button onClick={handleRightClick}>
          <img className="img-direita" src={esquerda} alt="Scroll Right" />
        </button>
    </div>

    </div>
  );
}

export default Feed;

css部分按鍵：

  .img-esquerda{
    position:absolute;
    left:2%;
    top:30.5%;
    width: 50px;
    height: 50px;

  }
  .img-direita{
    position:absolute;
    left:96%;
    top:30%;
    width: 50px;
    height: 50px;
    transform: rotate(180deg);

  }

當我單擊按鈕時，您如何看到它應該 go 到 function handleLeftClick 但它不會，我不知道出了什么問題

 <button onClick={handleLeftClick}>

我沒有關於該問題的任何控制台消息。 我嘗試尋找常規答案，但沒有人有效。

Answer 1

錯誤在 css 文件中，

沒有調整按鈕的組件，只調整了按鈕內部的img。 圖像正確地位於您的正確位置，但按鈕本身不在該位置。 所以當試圖點擊圖片時，沒有調用 function 因為只是圖片而不是里面有圖片的按鈕。 因此需要將 css 更改為按鈕和圖像在同一位置。