Question

我是React / ES6的新手，我正在研究我的第一个组件。我有一个PuzzleContainer组件，其中包含一个显示图像的Puzzle组件。容器组件进行AJAX调用以确定要显示的图像，然后将该数据传递给子组件。我想在单击其中一个图像时在容器组件中执行某些操作。

这是我的代码，我没有在容器组件中包含componentWillMount（）函数，但是card只是一个字符串数组。

class PuzzleContainer extends React.Component {     

    cardClicked(cardsrc) {
        console.log(cardsrc);
    }

    render() {
        return (
            <div>
                <section className="wrapper site-min-height" id="main-wrapper">
                    <Puzzle cards={this.state.cards} cardClicked={this.cardClicked}></Puzzle>
                </section>  
                <Infobar></Infobar>
            </div>
        );
    }
    }


    class Puzzle extends React.Component {
        render() {
        var cards = this.props.cards;
        var html = cards.map((card) =>
            <div className="col-lg-2 col-md-4 col-sm-6 col-xs-12 desc">
                <div className="photo-wrapper">
                    <div className="photo">
                        <img className="img-responsive" src={card} onClick={(card) => this.props.cardClicked(card)}></img>
                    </div>
                </div>
            </div>
        );

        return (
            <div className="row mt gutter">{html}</div>
        );
    }
}

问题是，每当我点击图像时，代理（？）对象就会被打印到控制台。它似乎是React的一些对象。但是，我的理解是它应该只打印传递给函数的卡值，这是一个字符串。

为什么要记录对象而不是字符串？如何使容器组件可以接收被单击的图像的标识？

Answer 1

您可以将card用作map函数的参数以及onClick函数的参数。因此，onClick事件对象将传递给this.props.cardClicked而不是您想要的字符串。

将img标记更改为

<img className="img-responsive" src={card} onClick={() => this.props.cardClicked(card)}></img>

会做你想做的事。

Answer 2

event处理程序的第一个参数是onClick={(card) => this.props.cardClicked(card)}对象。

card执行此操作时，会为事件对象指定名称this.props.cardClicked，并且您实际上将事件对象传递给card而不是map变量。正在<img className="img-responsive" src={card} onClick={this.props.cardClicked.bind(this, card)} />循环。

请改为：

<img>

顺便说一句，{{1}}是自动关闭的，您可以将开始和结束标记合并为一个。

在React中的onClick函数中传递数据

2 个答案: