Carousel onClick反应问题

如何解决Carousel onClick反应问题

我对传送带有问题。我制作了一个带有“消息”的轮播，并且我希望当我单击“ X”按钮时，该消息将从轮播的数组中删除，但是我无法在轮播中执行“ onClick”，因为当我执行onClick时= {console.log（'yes'）例如，每秒打印一次“ yes”，而无需单击任何内容。如何在轮播中使用只能在 click 上有效的onClick？

我的代码：

Please share your thoughts on this

数组中对象的示例：

    const showCarouselItems = (arr)=>{
    return(         
        arr.map( (element,index,arr)=>{
                if(element.read_or_not===0){
                return(
                    <div className={firstItemIsActive(index)}>
                    <div className="SocialMedia">
                        <div className="titel_socialmedia">
                            <div className="title-side">
                            <button className="circel C_email" id={element.id} style={{backgroundImage: "url(" + MailIcon + ")"}}></button>
                            <div className="item-title-name">{t('mail')}</div>
                            </div>
                            <div className="title-side">
                            <label className="clock_social">{element.time}</label>
                            <button className="circel carousel-exit"><div id="x">X</div></button>
                            </div>
                        </div>
                        <label className="subject_email">{element.subject}</label>
                        <div className="content_email carouselPara">{element.body}</div>
                    </div>
                    </div>


) }}))}

解决方法

尝试像这样设置点击手柄：

onClick={() => console.log('yes')}

此外，请勿在地图循环中创建句柄操作\功能。只需在外部创建它即可：

const handleOnItemClick = (id) => {//some busines logic}

和在地图中：

<button onClick={() => handleOnItemClick(element.id)} className="circel carousel-exit"><div id="x">X</div></button>

最诚挚的问候！