Question

我正在浏览React文档，并尝试根据相应元素的点击（与相同的键相关联）更改地图中一个元素的条件。使用看起来像这样的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>
);

现在，显然，当我点击第一个时，所有元素都会切换它们的类。对于我的生活，我无法弄清楚如何传递密钥，因此，如果我点击第1项，则使用密钥{1}的部分会获得＆＃34;活动＆＃34;上课，其他人则没有。在使用jquery的javascript中，我可以使用data-attribute来获取它。我确定反应有一种简单的方法，我只是不理解。

Answer 1

您可以通过在状态对象中设置活动键而不是切换条件来完成此操作。

所以在handleClick

中

this.setState({
    activeKey: e
});

然后在<section>

中

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

React：使用handleclick按键切换映射元素的类

1 个答案: