semantic-ui-react 列出 onClick 声明

Question

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

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

警告：道具类型失败：List 中的道具 onItemClick 与道具：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属性？

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

非常感谢！

Answer 1

我认为使用 onItemClick 的意图可能是您将在 List 上使用 items 道具，从那时起您将不会有任何 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 道具采用上述格式，您甚至不需要这样做 map 并且您的 render 功能会非常紧凑：

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

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

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

您将拥有：

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

如果您想要的东西可以从 event.target 获得，您可以将 handleClick 的引用传递给 onClick，即

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

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

semantic-ui-react 列出 onClick 声明

semantic-ui-react List onClick declaration

reactjs

semantic-ui-react