我试图更改 img src 以根据在 react.js 中单击的箭头方向从和数组中获取 src。
因此，例如我有一个数组，当用户单击右箭头时，它将向前更改 img src，如果她单击向后，它将返回上一个图像
这是我的代码：
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchPosts } from '../actions/index';
import { Link } from 'react-router';
var i = 0;
var blogPostImages = ['./img/placeholder.jpg', './img/placeholderB.jpg', './img/placeholderC.png'];
export default class HomePage extends Component {
changeBlogPicForwards() {
if (i == blogPostImages.length - 1) {
i = 0;
} else {
i = i + 1;
}
let blogPostImages = blogPostImages[i];
}
changeBlogPicBackwards() {
if (i == 0) {
i = blogPostImages.length - 1;
} else {
i = i - 1;
}
}
render() {
var blogCurrentPic = this.state.blogPostImages[i];
return (
<div>
<div className="top-section-actions">
<div className="image-holder">
<img className="blog-pictures" src={blogPostImages}/>
</div>
<div className="blog-name">
<div className="left-arrow-action arrow-icons">
<i onClick={(e) => this.changeBlogPicForwards(e)} className="fa fa-arrow-circle-o-left fa-2x" aria-hidden="true"></i>
</div>
<div className="right-arrow-action arrow-icons">
<i onClick={(e) => this.changeBlogPicBackwards(e)} className="fa fa-arrow-circle-o-right fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
)
}
}
我不断收到错误任何帮助将不胜感激。
您需要保持i状态，以便您可以在状态更改时发出信号响应以重新呈现页面setState。此外，src应该是blogCurrentPic
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchPosts } from '../actions/index';
import { Link } from 'react-router';
export default class HomePage extends Component {
constructor() {
this.state = { index : 0 };
this.blogPostImages = ['./img/placeholder.jpg', './img/placeholderB.jpg', './img/placeholderC.png'];
}
changeBlogPicForwards() {
let i = this.state.index;
if (i == this.blogPostImages.length - 1) {
i = 0;
} else {
i = i + 1;
}
this.setState({index: i});
}
changeBlogPicBackwards() {
let i = this.state.index;
if (i == 0) {
i = this.blogPostImages.length - 1;
} else {
i = i - 1;
}
this.setState({index: i});
}
render() {
var blogCurrentPic = this.blogPostImages[this.state.index];
return (
<div>
<div className="top-section-actions">
<div className="image-holder">
<img className="blog-pictures" src={blogCurrentPic}/>
</div>
<div className="blog-name">
<div className="left-arrow-action arrow-icons">
<i onClick={(e) => this.changeBlogPicForwards(e)} className="fa fa-arrow-circle-o-left fa-2x" aria-hidden="true"></i>
</div>
<div className="right-arrow-action arrow-icons">
<i onClick={(e) => this.changeBlogPicBackwards(e)} className="fa fa-arrow-circle-o-right fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
)
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句