テーブルの列見出しをクリックして列を非表示にしてからもう一度表示する

Question

列を非表示にする方法についてはthisの回答を見ました。私は少し複雑な行動が必要です。私は、ユーザーがテーブルのヘッダをクリックしたときに、彼女がクリックした列を取得し、検出し、その列を非表示にする必要があり、この

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"> 
      ... 

ようreactテーブルを持っています。その後、ユーザーがページ上の別のボタンをクリックすると、非表示になっているすべての列が再度表示される必要があります。

アクションが可能であることをユーザーに警告するために、カーソルがテーブルヘッダーの中にあるときは、カーソルが手のように変わった場合にもいいでしょう。ボタンの上にマウスを置いたときと同じように。

Answer 1

私は

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

レンダリングnullがあるそれらのレンダリングを避けるために、各ヘッダーの状態

this.state = {hidden: []} 

とイベントハンドラに

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

を隠されたテーブルヘッダのリストを持っているでしょう何かをレンダリングしないようにする有効な方法です。

は、ポインタを変更するには：私はそれを動作させるためにラフアウトラインを使用することができましたHow can I make the cursor a hand when a user hovers over a list item?