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

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是您正在寻找的项目