在React的onClick函数中传递数据

Question

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

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

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

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

为什么要记录对象而不是字符串？ 我如何做到这一点，以便容器组件可以接收被点击的图像的身份？

Answer 1

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

将您的img标签更改为

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

会做你想要的。

Answer 2

onClick处理程序的第一个参数是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>是自动关闭的，您可以将开始和结束标记合并为一个。