React如何触发onClick从地图功能

Question

我有一些被映射的列表，当我单击一个元素（它是数组中的对象之一）时，我想触发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>
})

。

Array = [{
    title: 'a',
    link: '/service/wallet'
},{
    title: 'b',
    link: '/service/home'
}]

我有this.props.location.pathname的值，我想可以将其与Array[i].link this.props.location.pathname进行比较。

这样的东西？

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

}

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

Answer 1

您需要保留“点击了吗？” 在this.state信息。 因为这是您需要跟踪的事情列表 ，因此无法将状态存储在单个变量中，因此需要它们的映射。

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>
})

您需要习惯于思考“反应方式”。 状态需要保持在组件状态（或者如果复杂性成为问题，请查看Redux）。 您不必强制性地操作DOM，也不必“询问” DOM以获取信息，而是根据状态告诉它外观。

Answer 2

请看一下此代码与react元素的映射数据

为了解决此问题，您可以使用一种状态来跟踪一组元素的交互，在这种情况下，它是元素列表。 在这里，您可以在状态变量中使用地图，并与每个元素相关联的{key，value}对进行跟踪。 希望这可以帮助。 谢谢。