Question

我想获取选中的项目，我想知道选中或单击了哪个项目。

我正在显示这样的用户列表：

<InfiniteScroll
    initialLoad={false}
    pageStart={0}
    loadMore={this.handleInfiniteOnLoad}
    hasMore={!this.state.loading && this.state.hasMore}
    useWindow={false}>
    <List 
        dataSource={this.state.data}
        renderItem={item => (
            <List.Item key={item}>
            <List.Item.Meta  
                avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> }
                  title={<a href="#">{item}</a>}/>                
            </List.Item>
        )}>
    </List>
</InfiniteScroll>

Answer 1

只需要将onClick处理程序添加到renderItem部分，这非常容易。

renderItem = {(item, index) => (
  <List.Item key={item} onClick={() => this.handleClick(index)}>
    <List.Item.Meta
      avatar={
        <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
      }
      title={<a href="#">{item}</a>}
    />
  </List.Item>
)}

，对于handleClick函数，代码为：

handleClick = index => {
  const selectedItem = this.state.data[index];
}

SelectedItem 是您要寻找的

Answer 2

上面的解决方案应该起作用。但是，只需确保将onClick事件附加到DOM元素即可。如果它是自定义组件，则事件处理程序将不起作用。因此，在这种情况下，List.Item（我想这是一个自定义组件）需要作为道具访问onClick，并将此事件附加到其最顶层的DOM元素，例如以下：

// List.Item

<li onClick={this.props.onClick} />

如何从React中的列表中获取所选项目？

2 个答案: