javascript - React:如何在不使用事件索引的情况下将实例传递给onClick

如果我在React中有一个元素列表，所有元素都调用连接到onClick的相同函数，则可以说该函数追加了一个类，那么如何在不影响所有列表元素的情况下将该实例传递给该函数。

每次单击列表元素时，我所有的列表元素都会受到影响。

handleClick() {
  this.setState({
    expandedList: !this.state.expandedList
  });
}

render() {
 const folderStatus = this.state.expandedList ? 'expanded' : 'collapsed';

 return (
  <div className="container">
    <ul>
      {folders.map((folder, index) => (
      <div onClick={() => this.handleClick()}
           className= {folderStatus}
           key= {index} >{folder}</div>
      ))}
   </ul>

最佳答案

在您的状态下存储列表索引可能会达到目的：

handleClick = (index) => {
    this.setState(prevState => ({
        // Make sure you collapse when you click twice on the same row
        selectedListIndex: prevState.selectedListIndex === index ? 'unclick' : index
    }));
}

render() {
    return (
    <div className="container">
        <ul>
        {folders.map((folder, index) => (
            <div onClick={() => this.handleClick(index)}
                // Conditionally render the desired class
                className= {this.state.selectedListIndex === index ? 'expanded' : 'collapsed'}
                key= {index} >{folder}</div>
        ))}
        </ul>

关于javascript - React:如何在不使用事件索引的情况下将实例传递给onClick，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51435472/