反応起動ストラップテーブル、チェックボックス、テキストフィールド

Question

私の問題に関連するものは見つかりませんでした。

現在、reactjsを学習し、反応ブートストラップテーブルを作成していくつかのデータを表示しようとしています。だから私が持っている問題は、checkBoxです。

私が遭遇する最初の問題は、チェックボックスの状態を変更する前に、チェックボックスのセルをクリックする必要があることです。私はちょうどそれをチェックしたり、チェックを外すためにそれをクリックできるようにしたい。 2番目は、チェックボックスをオンにした場合に列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で提案されているように、私は現在ブートストラップ・テーブルと組み合わせてコンポーネントを使用していますが、うまく動作しているようです。しかし、値の代わりにチェックボックスのみを表示するようにチェックボックスを修正する方法を理解できませんでした。私は、コンポーネントでブートストラップテーブルを使用するための素晴らしいサンプルコードを見つけました。私がリンクを見つけたら、ここでそれをリンクします。