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

【问题标题】：Detect click on a table column header, hide the column, then display it again检测点击表格列标题，隐藏列，然后再次显示
【发布时间】：2017-08-09 18:49:40
【问题描述】：

我看到了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">
            ...

我需要检测用户何时点击表格标题，获取她点击的列，然后隐藏该列。然后，如果用户单击页面上的单独按钮，我需要所有隐藏的列再次显示。

如果光标在表格标题中变成类似手的东西来提醒用户可以进行操作，那也很好。就像将鼠标悬停在按钮上时一样。

【问题讨论】：

标签： html reactjs

【解决方案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?

【讨论】：

感谢我能够使用粗略的轮廓使其工作！