代码之家 › 专栏 › 技术社区 › rosnk

需要访问在“map”函数中创建的单击“li”的“id”

reactjs reactjs-flux javascript

1

rosnk · 技术社区 · 10 年前

我正在呈现由 li 通过调用创建的元素 map 在一个包含一系列工作列表的道具上。

每个 锂 有一个 onClick 我需要在其中访问 id 与单击的行关联,以便显示作业列表的详细信息页 身份证件 。请注意 地图 添加 身份证件 作为 key 的属性 锂 元素。

这个 地图 函数看起来像这样:

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

以及 单击 处理程序如下所示:

handleClick: function(event) {
  console.log(event.target);
}

在处理器内部,我希望使用 target 的 锂 获取 钥匙 财产 锂 ,但 目标 returned似乎每次都不同,并且恰好是 锂 。我如何访问 钥匙 的 锂 被点击了?或者,措辞不同:我如何访问 身份证件 单击的作业列表的?

2 回复 | 直到 10 年前

1

François Richard 10 年前

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

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

它似乎适合你的需要。希望有帮助

2

1

J. Mark Stevens 10 年前

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