尝试使用反应从数组中更改 img src答案

【问题标题】：Trying to change the img src from an array on click using react尝试使用反应从数组中更改 img src
【发布时间】：2017-05-01 23:49:58
【问题描述】：

我试图根据在 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>
        )
    }
}

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

【问题讨论】：

我认为你图片的src属性应该是blogCurrentPic，而不是blogPostImages。
你遇到了什么错误？

标签： javascript html css arrays reactjs

【解决方案1】：

您需要将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>
        )
    }
}

【讨论】：

【解决方案2】：

使用setState({'i':i})刷新你的状态，setState 将使组件重新渲染。它会解决你的问题

【讨论】：