需要访问在 `map` 函数中创建的被点击的 `li` 的 `id`

Question

我正在渲染 'rows' 个职位列表，这些职位列表由 li 个元素表示，这些元素是通过调用 map 对包含职位列表数组的道具创建的。

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

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

在处理程序中，我希望使用单击的 li 的 target 来获取 li 的 key 属性的值，但是返回的 target 似乎每次都不同，并且恰好是 li 的不同子元素。如何访问被单击的 li 的 key？或者，换句话说：我如何访问被点击的职位列表的 id？

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` 函数中创建的被点击的 `li` 的 `id`

Need to access the `id` of clicked `li` created inside `map` function

javascript

reactjs

react-jsx

reactjs-flux