Reactjs 语义ui反应列表onClick声明

我正在尝试使用语义ui react动态创建文档列表。我希望在单击列表项时返回文档标题。根据文件：

由于这个原因，有一个

onItemClick

prop，但是当我使用它时，当它被渲染时，我会得到一个警告：

警告：失败的道具类型：道具

单击
列表中的
与道具冲突：
子项
。它们不能一起定义，请选择其中一个

此外，单击列表项也没有任何作用（我只想将文档标题记录到控制台）。代码如下：

handleListItemClick(event, data) {
  console.log("list item clicked: " + data.value);
}


buildResultsContainer() {
    return this.props.listOfResults.map((document,index) =>
      {
        return (
            <List.Item
              as='a'
              key={index}>
                <Icon name='file' />
                <List.Content>
                  <List.Header>{document.properties.title}</List.Header>
                  <List.Description>
                    {document.properties.description}
                  </List.Description>
                </List.Content>
            </List.Item>
      );
      }
    );
  }

  render() {
    return (
      <div>
        <List onItemClick={this.handleListItemClick}>
          {this.buildResultsContainer()}
        </List>
      </div>
    )
  }

handleListItemClick（事件、数据）{
console.log（“单击的列表项：“+data.value”）；
}
BuildResultContainer（）{
返回此.props.listOfResults.map（（文档，索引）=>
{
返回(
{document.properties.title}
{document.properties.description}
);
}
);
}
render（）{
返回(
{this.buildResultsContainer（）}
)
}

您能告诉我如何正确使用列表组件的onItemClick道具吗？

不那么重要的是，您有没有关于如何重构列表呈现的技巧？只是想保持渲染函数的简洁，但是这个函数调用看起来有点过分了

非常感谢
 我认为使用
onimclick
的目的可能是，您将使用
列表上的
项目
道具
，这样您就不会有任何
孩子了

render() {
    const items = this.props.listOfResults.map(document => {
      return {
        icon: 'file',
        content: document.properties.title,
        description: document.properties.description,
        onClick: e => console.log(document.title)
      }
    });

    return <List items={items} />
  }

或者，
List.Item
使用一个
onClick
属性，您可以在
buildResultsContainer（）
函数中定义该属性。由于每个
onClick
函数基于当前
文档
对象都是唯一的，因此需要使用匿名函数调用
handleClick
函数，如下所示：

<List.Item
  onClick={() => this.handleClick(document.title)}
  ...etc
/>

如果可以从
event.target
中获得所需内容，则只需将
handleClick
的引用传递到
onClick
即可

handleClick = event => {
    console.log(e.target.innerText);
};

<List.Item
  onClick={this.handleClick}
/>

handleClick=event=>{
console.log（e.target.innerText）；
};
谢谢！到目前为止，我尝试了另一种想法：如果我为
列表项
单击
，则在呈现列表时会立即调用该函数。这有点奇怪。
console.log（document.title）}/>
？在这种情况下，它工作得很好。奇怪（至少就我目前的reactjs知识而言）为什么
onClick={this.handleListItemClick（document.properties.title）}
会给出不同的结果。因为在那里传递的是函数调用，而不是对函数的引用。我将添加一个完全有意义的示例，它还解释了在我的尝试中渲染期间调用它的原因。你的两个建议都完美无瑕，非常感谢！
handleClick = docTitle => {
  console.log(docTitle);
};

handleClick = event => {
    console.log(e.target.innerText);
};

<List.Item
  onClick={this.handleClick}
/>