reactjs - 语义 ui-react 列表 onClick 声明

Question

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

有一个 onItemClick出于这个原因， Prop ，但是当我使用它时，我会在渲染时收到警告:

警告:失败的 Prop 类型: Prop onItemClick在 List与 Prop 冲突: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 Prop 吗？

不太重要，你有什么技巧可以重构列表渲染吗？只是想让渲染函数保持简短和干净，但是这个函数调用看起来有点矫枉过正....

非常感谢!

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

如果你有你的 listOfResults上面格式的 Prop ，你甚至不需要这样做 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 的引用到 onClick IE。

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

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