檢測點擊表格列標題，隱藏列，然後再次顯示

Question

我看到this對如何隱藏列的迴應。我需要更復雜一點的行爲。我有一個react表像這樣

var StockTable = React.createClass({ 
    render: function() {   
     var items = []; 
     for (var symbol in this.props.stocks) { 
      var stock = this.props.stocks[symbol]; 
       items.push(<OptionRow key={stock.symbol} stock={stock} bid={this.props.bid} ask = {this.props.ask} />); 
     } 

     return (  
      <table table-head id="stocktable"> 
      ... 

我需要當用戶點擊表頭進行檢測，得到她點擊了列，隱藏列。然後，如果用戶單擊頁面上的單獨按鈕，我需要隱藏的所有列才能再次顯示。

如果在表頭中當光標變成類似手的形狀時，它也會很好，以提醒用戶可以採取行動。就像您將鼠標懸停在按鈕上時一樣。

Answer 1

我不得不隱藏表頭的列表中的狀態

this.state = {hidden: []} 

和事件處理程序的每個標題

<th onClick={() => hideHeader('cost')}> 

，以避免使它們

hidden.indexOf('cost') !=== -1 ? <someheader/> : null 

渲染null是一個避免渲染某些東西的有效方法。

要更改指針：How can I make the cursor a hand when a user hovers over a list item?