반응 부트 스트랩 테이블, 체크 박스 및 텍스트 필드

Question

누군가 내 문제와 관련된 것을 찾지 못했습니다. 누군가가 링크 또는 정답을 갖고 있기를 바랍니다.

현재 reactjs를 학습하고 반응 부팅 스트랩 테이블을 만들어 일부 데이터를 표시하려고합니다. 그래서 내가 가진 문제는 checkBox입니다.

내가 처음 만나는 문제는 체크 박스의 상태를 변경하기 전에 체크 박스의 셀을 클릭해야한다는 점입니다. 확인하거나 선택을 취소하기 위해 클릭 만 할 수 있기를 원합니다. 두 번째로 좋은 링크가 있다면 어떻게 만들 수 있습니까? refrences 열은 확인란을 선택하면 편집 할 수 있습니다. 나는 그것을하는듯한 모범을 보았지만 그것을 작동시키지 못했습니다.

const criteriaCovered = [ 
    'Automated acceptance test', 
    'Developer test', 
    'Manual acceptance test', 
    'Unit test' 
] 
const cellEditProp = { 
    mode: 'click', 
    blurToSave: true 
}; 

function checkBoxFormat (cell,row) 
{ 
    return (
     <div> 
      <input type="checkbox" ref="criticalData" checked={cell} /> 
     </div> 
    ); 
} 

const element = (
    <div> 
     <BootstrapTable data={ac} cellEdit={cellEditProp}> 
      <TableHeaderColumn dataField='name' isKey={true}    
       width="25%">Name</TableHeaderColumn> 
      <TableHeaderColumn dataField='changeType' editable={{type: 
       'select', options: {values: ['Functionality','Layout']}}} 
       width="15%">Change Type</TableHeaderColumn> 
      <TableHeaderColumn dataField='criticalData' className="checkbox- 
       cell" dataFormat={checkBoxFormat} editable={{type: 
       'checkbox', options: {values: 'true:false'}}} 
       dataAlign="right" width="15%">Critical 
       data</TableHeaderColumn> 
      <TableHeaderColumn dataField='criteriaCoveredBy' editable= 
       {{type: 'select', options: {values: criteriaCovered}}} 
       width="25%">Criteria covered by</TableHeaderColumn> 
      <TableHeaderColumn dataField='refrences' 
       width="20%">Refrences</TableHeaderColumn> 
     </BootstrapTable> 
    </div> 
); 

ReactDOM.render(
    element, 
    document.getElementById('root') 
); 

영어 글쓰기 실례합니다. 그것은 제 두 번째 언어이고 여전히 많은 개선이 필요합니다.

Answer 1

스레드를 닫을 수 있습니다. tibuurcio에서 제안한 것처럼 부트 스트랩 테이블과 조합하여 현재 구성 요소를 사용하고 있습니다. 제대로 작동하는 것 같습니다. 그러나 값 대신 체크 박스 만 표시하도록 확인란을 수정하는 방법을 알 수 없습니다. 구성 요소가있는 부트 스트랩 테이블 사용에 대한 좋은 예제 코드를 발견했습니다. 링크를 찾으면 여기에 링크 할 것입니다.