2016-06-22 3 views
2

ReactJS와 함께 Material UI Table을 사용 중이며 행을 선택/선택 취소 할 때마다 상태 변수를 변경하려고합니다.프로 프 백 콜백이 반환되지 않습니까?

<Table 
    height='300px' 
    fixedHeader={true} 
    multiSelectable={true} 
    showRowHover={true} 
    onRowSelection={this.handleRowSelection.bind(this)} 
> 

I는 onRowSelection 소품에 전달 된 다음 함수있다 :이 정확하게 상태를 설정

handleRowSelection(selectedRows) { 
    let contactsImport = []; 

    if (selectedRows === 'all') { 
    contactsImport = this.state.contacts.new; 
    } else if (selectedRows !== 'none') { 
    selectedRows.forEach((index) => { 
     contactsImport.push(this.state.contacts.new[index]); 
    }); 
    } 

    this.setState({ 
    contactsImport:contactsImport 
    }); 
} 

는하지만 그것이 테이블 행 방지 Table는 행이 선택 될 때마다 트리거 onRowSelection을 갖는다 선택이 올바르게 작동합니다. 행을 클릭하면 확인란이 선택되지 않습니다. 체크하고있는 상태에서 '리플'애니메이션이 나오지만 체크 표시가 없으므로 즉시 선택을 취소하는 것처럼 보입니다.

setState에 대한 호출을 제거하면 문제가 해결되므로 setState이 콜백이 올바르게 반환되지 않도록 할 수 있습니까? 또는 Material UI의 버그 일 수 있습니까?

답변

2

프로그래밍 방식으로 제어하려는 경우 단일 행 구성 요소의 selected 속성을 상태에서 관리해야합니다. selected 속성은 기본적으로 false이므로 재 렌더링이 setState 일 때 false

으로 재설정됩니다.