React- 우아하게 토글 상태 전환

Question

현재 플라스크 부트 스트랩 테이블 3.0-beta2 패키지에 자체 컬럼 선택기를 통합하려고합니다.

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 열을 숨기고 다른 값에 대한 체크 박스에 체크 값으로 붙어 및 클릭 다음과 같이 I는 문제 섹션에서 GitHub의에 예를 발견 만/취소하고 숨기기/체크 내가 계산 된 변수를 사용하여 솔루션을 해결하기 위해 노력하고있어

아이디 열을 표시하고 나는 다음과 같은 최대 요리했습니다

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