1

現在、独自の列セレクターをフラスコ ブートストラップ テーブル 3.0-beta2 パッケージに統合しようとしています。次のような問題のセクションで、github の例を見つけました。

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 }) });
    };
  }
}

ただし、これは当然のことながらID列のみを表示/非表示にし、他の値のチェックボックスはチェックされた値でスタックし、クリックすると、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 を切り替えるにはどうすればよいですか?

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

4

1 に答える 1

0

私はそれを必要とする人のための解決策をまとめました。エレガントではありませんが、機能します:) このクリーナーを作成するための提案は大歓迎です!

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 });
}
于 2016-12-09T18:27:43.130 に答える