【发布时间】：2019-04-21 11:07:29
【问题描述】：
我正在用 ReactJS 开发一个项目。我要做的是使用上一个和下一个按钮更改图像中显示的当前图像。但是，按钮功能无法按预期工作。这是代码。
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from "./Header.js"
import "../sass/home.css"
import MCLogo from "./MCLogo.png"
import DNA from "./DNA.jpg"
import ES1 from "./EnviroSample1.jpg"
import AP1 from "./AntiBioProducer1.jpg"
import BDLogo from "./BDLogo.png"
import { runInThisContext } from 'vm';
class Home extends Component{
constructor(props)
{
super(props);
this.state = {
images: [require("./DNA.jpg"), require("./MCLogo.png")],
currentIndex: 0
};
this.goToPrevSlide = this.goToPrevSlide.bind(this);
this.goToNextSlide = this.goToNextSlide.bind(this);
}
goToPrevSlide () {
// this.setState(this.state.currentIndex = ((this.state.currentIndex-1)%3));
const {length} = this.state.images;
const{currentIndex} = this.state.currentIndex;
const newPointer = currentIndex === 0 ? length -1 : currentIndex - 1;
this.setState({currentIndex: newPointer});
}
goToNextSlide () {
// this.setState(this.currentIndex = ((this.currentIndex+1))%3);
const {length} = this.state.images;
const{currentIndex} = this.state.currentIndex;
const newPointer = currentIndex === length -1 ? 0 : currentIndex + 1;
this.setState({currentIndex: newPointer});
}
render(){
return(
<div className = "home">
<Header></Header>
<div className = "logo">
<img src={MCLogo} width = "125" height = "100" />
</div>
<div className = "blackBox">
<div className="image fade">
<img src={this.state.images[this.state.currentIndex]} width = "300" height = "300"/>
</div>
<button class = "prev" onclick={this.goToPrevSlide}>❮</button>
<button class = "next" onclick={this.goToNextSlide}>❯</button>
<script>
</script>
</div>
<h1>
Welcome to the Antibiotic Producer Database!
</h1>
<h2>
Recent Updates
</h2>
<p>
Nov 17 2018: Reviewed current state of website w/ Charlotte Berkes
</p>
<p>
Oct 17 2018: Confirmed w/ Charlotte Berkes to use Firebase
</p>
<p>
Oct 5 2018: Met with Charlotte Berkes to continue to discuss requirements.
</p>
<p>
Oct 3 2018: Finished the Requirements Doc.
</p>
<p>
Sep 13 2018: Initial Meeting w/ Charlotte Berkes to discuss the project.
</p>
<h1>
DISCLAIMER
</h1>
<p>
This website is subject to "fair use", which means that there are restrictions on who can do what on the website.
All users, regardless of logged in status, are able to view the homepage, blog page and search functionality.
Furthermore, they can view all information of samples and producers. However, to add a sample or a producer to the database,
they would have to create an account. Only Merrimack students and faculty with a valid @merrimack.edu address are allowed to create an account.
If a registered user uses the site innapropriatly, an administrator can delete their account at the user's expense.
</p>
<h2>
About the Project
</h2>
<p>
There has been a declining number of Antibiotics being found today. However, recent technologies have let scientists access previously untapped microbial space.
Merrimack Students under the direction of Charlotte Berkes will challenge this assumption by going around the Merrimack valley by collecting various environmental samples.
These samples will include plants and soil. Students will then upload information about the samples to the website.
Additionally, these students will search for microbiomes using antibiotic discovery and upload their findings to the Antibiotic Producer database.
</p>
<p>
Created By Samuel Bitzer, Mitchell Gent and Nicholas Mirasol. Special thanks to Charlotte Berkes.
</p>
<div className = "botlogo">
<img src={BDLogo} width ="200" height="200"/>
</div>
</div>
);
}
}
export default Home;
【问题讨论】：
-
它怎么不能按预期工作？当您单击上一个和下一个按钮时会发生什么？
-
无论你点击什么按钮，黑框上的图片还是一样的。