Javascript 尝试在单击时使用react从数组更改img src

我试图根据react.js中单击的箭头方向，更改img src从和数组中获取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>
        )
    }
}

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../actions/index”导入{fetchPosts}；
从“反应路由器”导入{Link}；
var i=0；
var blogPostImages=['./img/placeholder.jpg'，'./img/placeholder B.jpg'，'./img/placeholder C.png']；
导出默认类扩展组件{
changeBlogPicForwards（）{
if（i==blogpositmages.length-1）{
i=0；
}否则{
i=i+1；
}
设blogPostImages=blogPostImages[i]；
}
changeBlogPicBackwards（）{
如果（i==0）{
i=blogPostImages.length-1；
}否则{
i=i-1；
}
}
render（）{
var blogCurrentPic=this.state.blogPostImages[i]；
返回(
this.changeBlogPicForwards（e）}className=“fa-arrow-circle-o-left fa-2x”aria hidden=“true”>
this.changeBlogPicBackwards（e）}className=“fa-arrow-circle-o-right fa-2x”aria hidden=“true”>
)
}
}

---

我不断收到错误，任何帮助都将不胜感激。

您需要将

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>
        )
    }
}

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../actions/index”导入{fetchPosts}；
从“反应路由器”导入{Link}；
导出默认类扩展组件{
构造函数（）{
this.state={index:0}；
this.blogPostImages=['./img/placeholder.jpg'，'./img/placeholder B.jpg'，'./img/placeholder C.png']；
}
changeBlogPicForwards（）{
设i=this.state.index；
if（i==this.blogpositmages.length-1）{
i=0；
}否则{
i=i+1；
}
this.setState（{index:i}）；
}
changeBlogPicBackwards（）{
设i=this.state.index；
如果（i==0）{
i=this.blogPostImages.length-1；
}否则{
i=i-1；
}
this.setState（{index:i}）；
}
render（）{
var blogCurrentPic=this.blogpositmages[this.state.index]；
返回(
this.changeBlogPicForwards（e）}className=“fa-arrow-circle-o-left fa-2x”aria hidden=“true”>
this.changeBlogPicBackwards（e）}className=“fa-arrow-circle-o-right fa-2x”aria hidden=“true”>
)
}
}

使用

setState（{'i'：i}）

要刷新您的状态，setState将使组件重新启动。它将解决您的问题

我认为您图像的

src

属性应该是

blogCurrentPic

，而不是

blogPostImages

。出现了什么错误？