检测单击表列标题,隐藏列,然后再次显示

时间:2017-03-18 04:54:42

标签: html reactjs

我看到了关于如何隐藏列的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">
            ...

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

如果在表头中将光标更改为像手一样的东西以提醒用户可以执行操作,那也很好。就像将鼠标悬停在按钮上时一样。

1 个答案:

答案 0 :(得分:1)

我会在状态

中有一个隐藏表头的列表
adapter

和每个标题的事件处理程序

ViewHolder

避免渲染它们

this.state = {hidden: []}

渲染null是避免渲染某些内容的有效方法。

更改指针:How can I make the cursor a hand when a user hovers over a list item?