Question

我目前正在尝试将自己的列选择器集成到flask-bootstrap-table 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？

我可能没有看到更清洁的解决方案吗？

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

反应 - 优雅地切换状态可见性

1 个答案: