行がクリックされたときにブートストラップスタイルテーブル内の行を選択する

Question

クリックしたときにテーブルから行を強調表示するにはどうすればいいですか？私はonClick機能を使用してみましたが、私はそれを達成できません。

これは、テーブルデータをtdタグにマッピングするために使用した関数です。

displayData() { 
     let x; 
     if (this.props.data) { 
     x = this.props.data.map(item => (
     <tr> 
     <td> {item.height} </td> 
     </tr> 
    )); 
    } 
    return x; 
    } 

ここでは、この関数をレンダリング関数内で呼び出しています。

 <Table id="tableId" > 
     <thead> 
     <tr> 
     <th> height </th> 
     </tr> 
     </thead> 
    <tbody> {this.displayData()} </tbody> 
    </Table> 

Answer 1

あなたは、すべてのtdにクリックされたidの状態で入力されますstateそしてもちろんonClickイベントハンドラでは現在、既存のIDに応じて変化します、その後classNameプロパティをkeyを提供する必要が、したがって、このブロック：

if (this.props.data) { 
    x = this.props.data.map((item,key) => (
    <tr> 
    <td 
    key={key} 
    onClick={this.handleCellClick(key)} 
    className={`${this.state.checkedId===key? 'highlighted-cell': ''}`} 
     > {item.height} </td> 
    </tr> 
)); 
} 

と次のようにhandleCellClick機能が実装できます

handleCellClick = (key) => (event) => { 

if(this.state.checkedId===key){ 
    this.setState({ 
     checkedId: '', 
    }); 
    }else{ 
    this.setState({ 
     checkedId: key, 
    }); 
    } 
    } 

最終的にあなたのhighlited-cellクラスがあなたの好みごとのように書くことができます。

.highlighted-cell { 
    background-color: blue; 
    }