如何在React JS中传递来自Carousel图像的值

时间:2016-10-27 02:16:49

标签: javascript reactjs

我正在学习React JS并试图使用nuka-carousel创建一个可链接的轮播图像。我已经设置了一个数据文件来获取下面示例中的图像和链接等数据;

const RollList = [
  {
    headline: "Something Here 1",
    paragraph: "Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.",
    img_src: "http://placehold.it/755x435/ffffff/c0392b/&text=slide1",
    link: "/about",
    id: "roll-1"
    },
];
export default RollList;

图像加载到旋转木马中,但是我很难从函数中获取链接地址的值。我知道它可以在props中找到,因为我可以在react dev工具插件中看到它。

var React = require('react');
import RollList from '../../data/roll';
var Carousel = require('nuka-carousel');
import { browserHistory } from 'react-router';
import { Link } from 'react-router';
const MonCarousel = React.createClass({
    mixins: [Carousel.ControllerMixin],

handleLink(event) {
    let linkName= event.target.value;
    console.log(linkName);
    // let path = `${linkName}`;
    // browserHistory.push(path);
},

render() {
    let moncarousel = RollList.map((roll) => {
        return (
            <img src={ roll.img_src } key={roll.id} onClick={this.handleLink} value={roll.link} onLoad={() => {window.dispatchEvent(new Event('resize'));}}/>
        );
    });
    return (
        <div>
            <section class='carousel-section'>
                <div class='container'>
                    <div className="featured-row">
                        <div className="carousel-block">
                            <h4>Featured</h4>
                            <div className="carousel-shadow">
                                <Carousel speed={1200} autoplayInterval={7999} autoplay={true} wrapAround={true}>
                                    { moncarousel }
                                </Carousel>
                            </div>
                        </div>
                        <div className="carousel-side">
                            <div className="btn yel-btn">
                                Get in touch with us
                            </div>
                            <small>something here</small>
                            <br />
                            <br />
                            <div className="btn yel-btn">
                                Get in touch with us
                            </div>
                            <small>something here</small>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur sequi, minus molestiae perspiciatis, debitis adipisci eaque in recusandae voluptatum! Reiciendis enim vero expedita eaque placeat eligendi tempore minus consequuntur sequi.</p>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    )
}
});
module.exports = MonCarousel;

0 个答案:

没有答案