2017-09-14 5 views
0

React와 함께 Semantic UI를 사용하여 렌더링하는 테이블에서 클릭 할 때 값을 가져 오려고합니다. 불변 목록을 사용하여 내 행을 생성하고 고유 한 id 값에 액세스 할 수있는 onclick을 원합니다. 내 콜백의 값을 추출하는 내 시도를 로그인 할 때 내가 얻을 :Semantic의 React Table Component를 사용하여 테이블 행 클릭에서 데이터를 가져 오는 방법

'bff3a3e9-489e-0e19-c27b-84c10db2432b'는 TD 태그에 싸여

관련 코드 :

handleRowClick = (scen) => { 
 
    console.log(Object.keys(scen.target)); 
 
    console.log(scen.target.); 
 
    } 
 

 
    mapScenarios =() => { 
 
     return ((scen, i) => { 
 
     return(
 
      <Table.Row key = {scen.get('id')} onClick = {this.handleRowClick}> 
 
      <Table.Cell 
 
       children={scen.get('id') || '(No ID)'} 
 
      /> 
 
      <Table.Cell 
 
       children={scen.get('name') || '(No Name)'} 
 
      /> 
 
      <Table.Cell 
 
       children={scen.get('actions').size === 0 ? 'none' : `${scen.get('actions').size} action(s)`} 
 
      /> 
 
      </Table.Row> 
 
     ) 
 
     }) 
 
    }

답변

-1

반응을위한 의미 론적 UI에서는 행 클릭이 잘 구현되지 않습니다. 행을 클릭하면 실제로 그 행에서 CELL의 값을 얻었지만, 원하는 행은 아니지만 이드가 포함 된 셀을 클릭했기 때문에 효과가 있다고 생각했습니다. 해결 방법은 다음과 같습니다.

<Table.Row key = {scen.get('id')} onClick={() => this.props.tableRowClickFunc(scen.get('id'))}>