Question

我试图用语义ui-react动态创建文档列表。我希望在单击列表项时返回文档标题。根据文件： https://react.semantic-ui.com/elements/list

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

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

同样点击列表项也不会做任何事（我只想将文档标题记录到控制台）。这是代码：

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

如果您使用上述格式的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声明

1 个答案: