Question

我正在渲染＆＃39;行＆＃39;通过在包含一系列职位列表的道具上调用li而创建的map元素所代表的职位列表。

每个li都有一个onClick处理程序，在其中我需要访问与所点击的行相关联的id，以便显示作业列表的详细信息页面{{1 }}。请注意，id会将作业列表的map值添加为id元素的key属性。

li函数看起来像这样：

map

var jobListRow = this.props.joblists.map(function(jobrowobj) { return ( <li key={jobrowobj.id} onClick={this.handleClick}> <div>bla bla</div> <span>bla bla</span> </li> ); });处理程序如下所示：

onClick

在处理程序中，我希望使用点击的handleClick: function(event) { console.log(event.target); }的{{1}}来获取target的{{1}}属性的值，但是li返回似乎每次都不同，恰好是key的变化子元素。如何访问被点击的li的{{1}}？或者，换句话说：我如何访问被点击的工作列表的target？

Answer 1

这应该有效，你需要有正确的上下文绑定：

var jobListRow = this.props.joblists.map(function(jobrowobj, i){
    return(
        <li key={jobrowobj.id} onClick={this.handleClick.bind(this,i)}>
            <div>bla bla</div>
            <span>bla bla</span>
        </li>
    )
});

 handleClick: function(i) {
    console.log('You clicked: ' + this.props.joblists[i]);
 }

在此处找到此实施：https://facebook.github.io/react/tips/communicate-between-components.html

它似乎符合您的需求。希望它有所帮助

Answer 2

map函数有一个选项可以将'this'作为第二个参数传递。我是这样做的。

    var vm = this;
    var jobListRow = this.props.joblists.map(function(jobrowobj){
        return(
            <li key={jobrowobj.id} id={jobrowobj.id} onClick={this.handleClick}>
                <div>bla bla</div>
                <span>bla bla</span>
            </li>
        )
    }, vm);

    handleClick: function(event) {
      console.log('You clicked: ' + event.target.id);
    }

需要访问`map`函数

2 个答案: