如何将Onclick属性与react js中的函数一起使用

Question

嘿，我有以下问题，当我点击按钮时，它们不会转到您的函数。我不明白怎么了。

代码：

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);
}

你怎么看，当我点击按钮时，它应该转到功能处理左侧点击，但不会，我不知道出了什么问题

<button onClick={handleLeftClick}>

我没有任何关于这个问题的控制台消息。我试着寻找传统的答案，但没有人能奏效。

Answer 1

错误在css文件中

按钮的组件没有调整，只调整了按钮内部的img。图像正确地位于您的正确位置，但按钮本身不在那个位置。所以当试图点击图像时，没有调用函数，因为这只是图像，而不是里面有图像的按钮。因此需要将css更改为按钮和图像位于同一位置。