检测点击表格列标题，隐藏列，然后再次显示

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?