React:如何在不使用活动索引的情况下将实例传递给onClick

Question

如果我在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>

Answer 1

将列表索引存储在您的状态中可能会起到以下作用：

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>

Answer 2

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.bind(this,index)} 
// Conditionally render the desired class
className= {this.state.selectedListIndex === index ? 'expanded' : 'collapsed'} 
key= {index} >{folder}</div>
))}
</ul>

只是费利帕的回答有点小变化。onClick={this.handleClick.bind(this,index)}

如果我想在函数内部使用this，我们必须绑定this和