javascript - setAttribute 不适用于 create-react-app 中的 onClick
问题描述
设置为 document.createElement("span") 的变量(“navBtn”)创建了一个跨度,但由于某种原因在该跨度上使用 setAttribute 不起作用。navBtn 变量在它自己的函数中,而 setAttribute 正在尝试使用 onClick 来调用不同的函数。我正在关注使用常规 Javascript 制作轮播/幻灯片的视频。我不确定代码应该从常规 JavaScript 更改为 React 多少,所以我尝试使用 JSX、常规 JavaScript 等绑定方法。但似乎没有任何效果。
我正在尝试从该网站重新创建轮播:https ://www.spacex.com/ 我不知道如何制作,所以我开始关注与网站上的幻灯片具有相同功能的视频但以我自己的方式对其进行了调整,使其看起来像来自 SpaceX 的那个。这是在 Create-react-app 中,我正在关注的视频是纯 JavaScript,这就是为什么我没有使用道具或状态。
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)} 我没有收到错误,但也没有结果。尝试以不同的方式编写此 setAttribute 时,我遇到了其他错误,而您通常不会使用 React onClick 属性。结果应该是单击创建的跨度应该将幻灯片移动到下一个图像,并使用“活动”类设置下一个 navBtn。我希望它看起来的方式在这里https://www.spacex.com/
解决方案
尝试
navBtn.setAttribute("onClick", "this.moveSlide("+i+")");
或者
navBtn.setAttribute("onClick", "{this.moveSlide("+i+")}");
推荐阅读
- linux - 如何保护码头工人?docker 安全决策之间的权衡
- android - 为什么我在 Xamarin 中使用 ContentProvider 插入项目后数据库为空?
- angularjs - 如何将 angularjs 上传功能迁移到 Angular 9
- wordpress - 无法编辑顶部菜单
- ffmpeg - FFMPEG zoompan 用于从开始持续时间连续放大/缩小
- sql - SQL 连接和过滤
- c - 从现有的开源 C 库中提取函数源代码
- logstash - Logstash http 输入插件接受 gzip 文件但如何仅检测文本格式?
- assembly - 用汇编语言删除文件的程序?
- java - 计算多行文本的字符数