[React/JSX]：當單擊當前組件時，刪除兄弟組件上的CSS類

我正在用React構建導航欄。導航欄有各種導航項目。當點擊其中一個導航項目時，必須將類別「活動」添加到單擊的項目中（如果該項目處於活動狀態，則可以通過新的狀態跟蹤輕鬆實現該部分）。[React/JSX]：當單擊當前組件時，刪除兄弟組件上的CSS類

但是，當「活動」類被添加到其中一個導航項時，活動類必須從當前擁有它的任何其他導航項中移除。這對jQuery來說很簡單，但我猜這不是React的最佳做法。從同級導航項中移除「活動」類的理想方式是什麼？

來源

2015-11-06 Amal Antony

我認爲你應該解決這個容器級（導航欄），而不是導航項目。導航欄應該知道它的孩子。項目（導航欄的孩子）不需要了解彼此。 – hex13

什麼hex13說 –

談話很便宜。我已經在下面顯示了代碼;） – hex13

我認爲最好的方法是在容器組件中處理這個問題。菜單項不需要了解彼此，但容器可以。所以容器可以給孩子onClick回調。後來在回調容器可以設置其狀態setState。在render函數中，您只需將active屬性傳遞給您的MenuItem。

// ES6, React 0.14 
var MenuItem = ({onClick, text, active}) => (
    <button onClick={onClick} style={active? {color: 'red'} : null}>{text}</button> 
); 

// example of use: <MenuBar buttons={['cat', 'dog', 'penguin']}/> 
class MenuBar extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {activeIndex: 0}; 
    } 
    handleItemClick(index) { 
     this.setState({activeIndex: index}); 
    } 
    render() { 
     var activeIndex = this.state.activeIndex; 
     return <div> 
      { 
       this.props.buttons.map(
        (btn, i) => (
         <MenuItem 
          active={activeIndex === i} 
          key={i} 
          onClick={this.handleItemClick.bind(this, i)} 
          text={btn} /> 
        ) 
       ) 
      } 
     </div> 
    } 
}

來源

2015-11-06 16:00:44 hex13

儘管一般的方法是正確的（因此被接受的答案），但是在這個代碼中有一個錯誤，在MenuBar :: render內部，你添加了一個應該調用handleItemClick的onClick。但這不會觸發。請參閱此討論瞭解更多詳情：http://stackoverflow.com/questions/24103072/reactjs-onclick-handler-not-firing-when-placed-on-a-child-component –

它應該工作，因爲我檢查了這一點。檢查你自己：https：//jsfiddle.net/69z2wepo/20164/。我使用了自動保存this變量的ES6胖箭頭（'=>'）語法。 – hex13

關閉課程，使這個例子工作，你不必使用胖箭頭語法，它只是ES6隨附的語法糖。這個例子也可以寫在ES5中。一般方法保持不變）。 – hex13

我最近開始學習React，所以我不是專家。但我剛開始建立一些標籤，你可以看到我的例子here。

我所做的是使一個有條件的isActive狀態在點擊事件中發生變化。然後這個類變成這樣：

className={this.props.isActive ? "active" : null}

來源

2015-11-06 16:00:10 cocoa

[React/JSX]：當單擊當前組件時，刪除兄弟組件上的CSS類

回答

相關問題