Question

我试图根据在react.js中单击的箭头方向更改img src从src和数组中获取src。

例如，我有一个数组，当用户点击右箭头时，它会改变img src前进，如果她点击后退，它将返回prev图像

这是我的代码：

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

我不断收到任何错误，我会非常感激。

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

Answer 2

使用{{1}}刷新你的状态，setState将使组件reRender。它会解决你的问题

尝试使用react在click上更改img src

2 个答案: