React- Elegantly Toggle State Visibility

Question

В настоящее время я пытаюсь интегрировать свой собственный селектор столбцов в пакет флэш-бутстрап-таблицы 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 Unsurprisingly и флажки для других значений застряли проверяемые значения и при нажатии только проверить/снимите и скрыть/показать столбец 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 }); 
}