Question

我正在尝试在material-ui中实现List。我试图显示随机生成的元素数组，它们正在显示滚动条列表，如我所愿。但是我想选择那个特定的列表项，因为我无法选择它，即使使用点击也是如此。所以任何人都可以帮助我。这是我的代码：

var MuiListElement = React.createClass(
  {
    handleClick() {
        console.log("secondList clicked")
    },
    render()
    {
      let faker = require('faker')
      let myItems = []
      for(let i = 0; i < 5000; i++)
      {
      let name = faker.Name.findName()
      myItems.push(<ListItem onClick={this.handleClick()} key={i.toString()}>{name}</ListItem>)   
      }
    return(
      <div style={{width:'400px'}}>
      <Paper style={{maxHeight: 200, overflow: 'auto'}}>
      <List selectable='true'>
          {myItems}
      </List>
</Paper>
      </div>

    )
    }
  }
)

Answer 1

this.handleClick（）在渲染过程中调用handleClick函数，当用户单击列表项时，应调用它。你不想将该功能传递给onClick，不调用该函数。

myItems.push(
  <ListItem 
    onClick={this.handleClick}   //pass function, don't call function
    key={i}>  //note: you can pass key as number
    {name}
  </ListItem>)

现在让我预测未来，你想知道点击了什么项目。您可以使用bind。

myItems.push(
  <ListItem 
    onClick={this.handleClick.bind(this, i)}   //bind returns a function 
    key={i}>
    {name}
  </ListItem>)

现在你知道传递了什么

handleClick(i) {
    console.log("secondList clicked", i)
},

但是，每次渲染时，都会创建一个新功能，并会略微降低性能看到这个讨论， React js onClick can't pass value to method

如果您不理解，请告诉我。

在列表中使用数组时，可滚动材质Ui列表中的可单击列表项

1 个答案: