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

Question

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

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

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 作为地图功能的参数以及 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> 是自动关闭的，您可以将开始和结束标签合二为一。

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

Passing data up in an onClick function in React

javascript

reactjs

isomorphic-javascript