semantic-ui-react 列表 onClick 声明

Question

我正在尝试使用语义用户界面反应动态创建文档列表。我想在单击列表项时取回文档标题。根据文档： https: //react.semantic-ui.com/elements/list

由于这个原因有一个onItemClick道具，但是当我使用它时，我在渲染它时收到警告：

警告：失败的道具类型：道具onItemClick与List道具冲突：children。它们不能一起定义，只能选择其中之一。

另外，单击列表项不会执行任何操作（atm 我只想将文档标题记录到控制台）。这是代码：

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

您能告诉我如何正确使用 List 组件的 onItemClick 属性吗？

不太重要的是，您对如何重构列表渲染有什么建议吗？只是想让渲染函数保持简短和干净，但是这个函数调用看起来有点矫枉过正......

多谢！

Answer 1

我想也许使用时的意图onItemClick是你会使用这个items道具List，因为那时你就不会有任何children例如

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} />
  }

如果您的listOfResultsprop 采用上述格式，您甚至不需要这样做map，并且您的render函数将非常紧凑：

render() {
  return <List items={this.props.listOfResults} />;
}

或者，List.Item采用onClick您可以在buildResultsContainer()函数中定义的 prop。由于每个onClick函数基于当前document对象都是唯一的，因此您需要使用匿名函数来调用您的handleClick函数，如下所示：

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

然后你会：

handleClick = docTitle => {
  console.log(docTitle);
};

如果您想要的内容可以从 获得event.target，您可以将 的引用传递handleClick给onClickie

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

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