setAttribute在create-react-app中無法與onClick一起使用

Question

設置為document.createElement（“ span”）的變量（“ navBtn”）創建一個跨度，但是由於某種原因在該跨度上使用setAttribute無效。 navBtn變量位於其自身的函數中，setAttribute試圖使用onClick調用其他函數。我將跟着視​​頻一起使用常規Javascript制作輪播/幻燈片。 我不確定代碼應從常規JavaScript更改為React多少，因此我嘗試使用JSX，常規JavaScript等方法綁定該方法。但是似乎沒有任何效果。

我正在嘗試從以下網站重新創建輪播： https : //www.spacex.com/我不知道如何制作該輪播，所以我開始跟着視頻播放，該視頻具有與該網站上的幻燈片播放功能相同的功能但以我自己的方式進行了調整，使其看起來像是SpaceX的那種。 這是在Create-react-app中，而我跟隨的視頻是在純JavaScript中，這就是為什么我不使用props或狀態YET的原因。

import React, {Component} from 'react';
import {Link} from "react-router-dom";
import './Showcase.css';

var slideIndex, slides, navBtns, captionText;
class Showcase extends Component{
    constructor(props){
        super(props);
        this.moveSlide = this.moveSlide.bind(this);
        this.plusSlides = this.plusSlides.bind(this);
    }
    componentDidMount(){
        this.initGallery();
    }
    initGallery(){
        slideIndex = 0;
        slides = document.getElementsByClassName('imageHolder');
        slides[slideIndex].style.opacity = 1;

        captionText = document.querySelector('.captionHolder .captionText');
        captionText.innerText = slides[slideIndex].querySelector(".captionText").innerText;

        navBtns=[];
        var navBtnsContainer = document.getElementById('navBtnsContainer');

        for(var i=0; i < slides.length; i++){
            var navBtn = document.createElement("span");
            navBtn.classList.add("navBtns");
            navBtn.setAttribute("onClick", "{() => this.moveSlide("+i+")}");
            navBtnsContainer.append(navBtn);
            navBtns.push(navBtn);
        };

        navBtns[slideIndex].classList.add("active");
    }
    plusSlides(n){
        this.moveSlide(slideIndex + n);
    }
    moveSlide(n){
        var i, current, next;
        var moveSlideAnimClass = {
            forCurrent: "",
            forNext: ""
        };
        if(n > slideIndex){
            if(n>=slides.length){n=0}
            moveSlideAnimClass.forCurrent = "moveLeftCurrentSlide";
            moveSlideAnimClass.forNext = "moveLeftNextSlide";
        } else if(n < slideIndex){
            if(n < 0){n = slides.length - 1}
            moveSlideAnimClass.forCurrent = "moveRightCurrentSlide";
            moveSlideAnimClass.forNext = "moveRightNextSlide";
        }
        if(n != slideIndex){
            next = slides[n];
            current = slides[slideIndex];
            for(i=0; i<slides.length;i++){
                slides[i].className="imageHolder";
                slides[i].style.opacity=0;
                navBtns[i].classList.remove("active");
            }
            current.classList.add(moveSlideAnimClass.forCurrent);
            next.classList.add(moveSlideAnimClass.forNext);
            navBtns[n].classList.add("active");
            slideIndex=n;
            slides[slideIndex].style.opacity = 1;
        }
    }
    render(){
        return(
            <section id="Showcase"> {/*CONTAINS ALL SLIDING IMAGES*/}
                <div className="captionHolder">
                    {/* <p className="captionText"></p> */}
                    <Link exact to="/amos" className="captionText"></Link>
                    <Link exact to="/amos">Watch Replay</Link>
                    <div id="right" onClick={() => this.plusSlides(1)}>RIGHT</div>
                    <div id="left" onClick={() => this.plusSlides(-1)}>LEFT</div>
                </div>
                <div className="imageHolder"> {/*HOLDS ALL IMAGES HERE*/}
                    <img src="https://www.spacex.com/sites/spacex/files/amos17_v2.jpg" alt="Amos-17 Mission"/>
                    <p className="captionText">Amos-17 Mission</p>
                </div>

                <div className="imageHolder"> {/*HOLDS ALL IMAGES HERE*/}
                    <img src="https://www.spacex.com/sites/spacex/files/v2_smallsatheader.png" alt="RideShare Missions"/>
                    <p className="captionText">Smallsat Rideshare Program</p>
                </div>

                <div className="imageHolder"> {/*HOLDS ALL IMAGES HERE*/}
                    <img src="https://www.spacex.com/sites/spacex/files/nasa_astronauts3.jpg" alt="NASA Astronauts on crew Dragon"/>
                    <p className="captionText">NASA Astronauts on Crew Dragon</p>
                </div>

                <div id="navBtnsContainer"></div>
            </section>
        );
    }
}

export default Showcase;

如果我嘗試以“ React”方式編寫代碼，則onClick = {（）=> this.moveSlide（i）}不會出現錯誤，但也不會產生結果。 當嘗試以通常不會為React onClick屬性使用的其他方式編寫此setAttribute時，出現了其他錯誤。 結果應該是，單擊創建的跨度應將幻燈片放映移動到下一個圖像，並使用“活動”類設置下一個navBtn。 我希望它的外觀在這里https://www.spacex.com/

Answer 1

嘗試

  navBtn.setAttribute("onClick", "this.moveSlide("+i+")");

要么

  navBtn.setAttribute("onClick", "{this.moveSlide("+i+")}");