React-エレガントな状態の可視性の切り替え

Question

現在、私自身のカラムセレクタをflask-bootstrap-table 3.0-beta2パッケージに統合しようとしています。しかし、これが唯一のショー/当然のID列を非表示にし、他の値のチェックボックスにチェック値で立ち往生している

export default class ColumnHideTable extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { showModal: false, hiddenColumns: {} }; 
    } 

    changeColumn(id) { 
    return() => { 
     this.setState({ hiddenColumns: Object.assign(this.state.hiddenColumns, { id: !this.state.hiddenColumns.id }) }); 
    }; 
    } 
} 

とクリックしたとき、私は次のようである問題セクションのgithubの上の例を見つけました、唯一のオフ/チェックして、非表示/ Iが計算された変数を使用してソリューションをうまくしようとしていると私は、次を調理しましたidカラム

を示しています。

setColumnState(column) { 
    let columns = Object.keys(cyhyData[0]) 
    var o = {} 

    for(let i=0; i < columns.length;i++) { 
     if(column == columns[i]) { 
     Object.defineProperty(o, column, { 
      value: !this.state.hiddenColumns.column, 
      enumerable: true 
     }) 
     break 
     } 
    } 
    return o 
    } 

    changeColumn(column) { 
    return() => { 
     this.setState({ hiddenColumns: Object.assign(this.state.hiddenColumns, this.setColumnState(column)) }); 

     console.log(this.state.hiddenColumns) 
    }; 
    } 

これは正しく列を隠し、明らかにそれらを隠すことはできません。どうすればトグルできますか？this.state.hiddenColumns.givenCol？

私が見ていない清潔なソリューションはありますか？

Answer 1

私はそれを必要とする人のためのソリューションを一緒にハッキングしました。それはエレガントではありませんが、それは動作します:)このクリーナーを作るための提案は大歓迎です！

constructor(props) { 
    super(props); 
    this.state = { showModal: false, hiddenColumns: {} }; 
} 

changeColumn(column) { 
    return() => { 
    var o = {} 

    if(!this.state.hiddenColumns.hasOwnProperty(column)) { 
     Object.defineProperty(o, column, { 
     value: true, 
     enumerable: true 
     }); 
     this.setState({ hiddenColumns: Object.assign(this.state.hiddenColumns, o) }); 
    } else { 
     this.setState({ hiddenColumns: Object.assign(!this.state.hiddenColumns, o) }); 
    }; 
    } 
} 

closeColumnDialog = (onClick) => { 
    this.setState({ showModal: false }); 
} 

openColumnDialog = (onClick) => { 
    this.setState({ showModal: true }); 
}