Javascript 如何从映射函数触发onClick

我有一些映射的列表，我想在单击元素（数组中的一个对象）时触发onClick

假设有3个列表，当我单击其中一个时，我想将“我单击的元素”的类从“关闭”更改为“打开”

state= {
    open: false
}

handleClick = () => {
    this.setState({
        open: !this.state.open
    })
}

Array.map((list, index) => {
    <div key={index} onClick={this.handleClick}>
        <p className={this.state.open? 'open' : 'close'}>{list.title}</p>
    </div>
})

我的值为

this.props.location.pathname

，我想我可以将其与

Array[I].link

进行比较

像这样的

if(this.props.location.pathname === Array[0].link){

}

但是，我不知道如何完成这个问题的代码。请告诉我的想法是否正确，并提供一些提示。

您需要在

此状态中保留“是否已单击？”信息。因为它是一个你需要跟踪的东西的列表，你不能将状态存储在一个变量中，你需要一个它们的映射

state= {
    open: {}
}

handleClick = (link) => {
    let linkOpenState = false;
    if (this.state.open.hasOwnProperty(link)) {
        linkOpenState = this.state.open[link];
    }

    this.setState({ open: { [link]: linkOpenState } })
}

Array.map((list, index) => {
    <div key={index} onClick={this.handleClick.bind(this, list.link)}>
        <p className={this.state.open[list.link]? 'open' : 'close'}>{list.title}</p>
    </div>
})

状态={
打开：{}
}
handleClick=（链接）=>{
让linkOpenState=false；
if（this.state.open.hasOwnProperty（链接））{
linkOpenState=this.state.open[link]；
}
this.setState（{open:{[link]：linkOpenState}}）
}
Array.map（（列表，索引）=>{
{list.title}
})

你需要习惯于“反应方式”。状态需要保持在组件状态（或者，如果复杂性成为一个问题，请查看Redux）。您不必强制操作DOM，也不必“询问”DOM以获取信息，而是根据状态告诉它应该是什么样子。
您需要在
此状态中保留“单击了吗？”信息。
。因为它是一个你需要跟踪的东西的列表，你不能将状态存储在一个变量中，你需要一个它们的映射

state= {
    open: {}
}

handleClick = (link) => {
    let linkOpenState = false;
    if (this.state.open.hasOwnProperty(link)) {
        linkOpenState = this.state.open[link];
    }

    this.setState({ open: { [link]: linkOpenState } })
}

Array.map((list, index) => {
    <div key={index} onClick={this.handleClick.bind(this, list.link)}>
        <p className={this.state.open[list.link]? 'open' : 'close'}>{list.title}</p>
    </div>
})

状态={
打开：{}
}
handleClick=（链接）=>{
让linkOpenState=false；
if（this.state.open.hasOwnProperty（链接））{
linkOpenState=this.state.open[link]；
}
this.setState（{open:{[link]：linkOpenState}}）
}
Array.map（（列表，索引）=>{
{list.title}
})

你需要习惯于“反应方式”。状态需要保持在组件状态（或者，如果复杂性成为一个问题，请查看Redux）。您不必强制操作DOM，也不必“询问”DOM以获取信息，而是根据状态告诉它应该是什么样子。
请查看此代码

为了解决这个问题，您可以有一个状态来跟踪一组元素的交互，在您的例子中是元素列表。
在这里，您可以在状态变量中使用映射，并将{key，value}对与每个元素关联以跟踪它。
希望这有帮助。
谢谢。
请查看此代码

为了解决这个问题，您可以有一个状态来跟踪一组元素的交互，在您的例子中是元素列表。
在这里，您可以在状态变量中使用映射，并将{key，value}对与每个元素关联以跟踪它。
希望这有帮助。
谢谢。
onClick={（）=>this.handleClick（list）}
-传递任何你想传递的
handleClick
onClick={（）=>this.handleClick（list）}
-传递任何你想传递的
handleClick