reactjs - react : using handleclick to toggle class of mapped element by key

Question

我正在浏览 React 文档，并尝试根据相应元素(与同一键关联)的点击来更改 map 中一个元素的条件。使用看起来像这样的handleClick:

handleClick: function(e) {
    this.setState({condition: !this.state.condition});
    console.log('clicked' + e);
}

我有一些这样绘制的菜单项:

return (
    <li key={i}>
        <a
            onClick={_this.handleClick.bind(_this, i)}
            data-nav={'nav-' + el.label.en.toLowerCase()}>
            {el.label.en}
        </a>
    </li>
);

还有一些子菜单部分，我想根据上面的点击来切换其类:

return (
    <section
        className={_this.state.condition ? "active" :""}
        key={i}
        id={'nav-' + el.label.en.toLowerCase()}>
        <ul>
            <GetChildren data={el.children} />
        </ul>
    </section>
);

现在，显然，当我单击第一个时，所有元素都会切换其类。对于我的一生，我无法弄清楚如何传递 key ，因此，如果我单击项目 1，具有 key {1} 的部分将获得“事件”类，而其他部分则不会。在带有 jquery 的 javascript 中，我可以使用数据属性来获取它。我确信 React 有一种我只是不理解的简单方法。

Answer 1

您可以通过在状态对象中设置事件键而不是切换条件来实现此目的。

所以在你的 handleClick 中

this.setState({
    activeKey: e
});

然后在你的<section>中

className={_this.state.activeKey === i ? "active" : ""}