反應：使用handleclick按鍵切換映射元素的類

我正在瀏覽React文檔，並試圖根據單擊相應元素（與同一個鍵相關聯）來更改地圖中某個元素的條件，。使用handleClick看起來是這樣的：反應：使用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}的部分會獲得「主動」類，而其他人則不會。在與jQuery的JavaScript中，我可以使用數據屬性來獲取它。我敢肯定，反應有一個簡單的方法，我只是不理解。

來源

2016-07-23 dilettante

你需要有與每seperately您的數據的每個元素相關聯的條件屬性。有一個共同的國家屬性將導致所有的變化 –

您可以通過在狀態對象中設置活動鍵而不是切換條件來完成此操作。

所以在你

this.setState({ 
    activeKey: e 
});

然後在<section>

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

來源

2016-07-23 15:46:16 Deryck

這是完美的，真正優雅。謝謝。 – dilettante

反應：使用handleclick按鍵切換映射元素的類

回答

相關問題