ブートストラップテーブルの特定の行の色を動的に変更してください。

Question

私は反応プロジェクトでブートストラップテーブルを使用しています。

<Table className='flags-table' responsive hover> 
    <thead> 
    <tr> 
     <th></th> 
     <th> Time In</th> 
     <th> Time Out</th> 
     <th> Type</th> 
     <th> Category</th> 
    </tr> 
    </thead> 
    <tbody> 
    { 
     this.props.tag_fetch_reducer.tags.map((x, i) => (
      <tr key={i} onClick={this.handleRowClick.bind(this, i)}> 
       <td> 
        <div className='red-box'></div> 
       </td> 
       <td> {this.secondsToHms(x.time)} </td> 
       <td> {this.secondsToHms(x.stopTime)} </td> 
       <td> {x.tagname} </td> 
       <td contentEditable="false"> {x.category}</td> 
      </tr> 
     )) 
    } 
    </tbody> 
</Table> 

は、私が欲しいもの：

• Iが一定の間隔の後に、それの状態を変更tagIndexという名前の変数を持って、私はこのように、タグからのデータを取得するテーブルを持っています。したがって、tagIndexの値は変化し続けます。この値は、0からテーブル行の最後のインデックスと同じ値にすることができます。今私が望むのは、tagIndexが特定の値に達するたびに、そのインデックスの行の色を変更したい場合です。

たとえば、tagIndexが5の場合は、5番目の行の色が黄色になり、他のすべての行が白色になるはずです。その後、tagIndexが8に変わったら、黄色を8行目に、他のすべての行を白くします。これどうやってするの？私はあなたが使用している正確に何台言うことができない

Answer 1

は（あなたのマークアップがより少し違って見える反応し、ブートストラップ・テーブル）

しかし、あなたがテーブルと普通のブートストラップを使用していると仮定します。あなたはこのようなことをすることができます。毎秒状態で選択されている行を変更するタイマーを作成しました。次に、選択した行である背景に赤を設定するクラス（プロジェクトの構造に応じてインラインスタイルを使用できます）を追加します。

https://jsfiddle.net/nacj5pt4/

var Hello = React.createClass({ 
 
    getInitialState: function() { 
 
    return { 
 
     selectedIndex: 0 
 
    }; 
 
    }, 
 
    componentDidMount() { 
 
    setInterval(() => this.setState({ 
 
     selectedIndex: (this.state.selectedIndex + 1) % this.props.data.length 
 
    }), 1000) 
 
    }, 
 
    render: function() { 
 
    return (
 
     <table className='flags-table'> 
 
     <thead> 
 
     <tr> 
 
      <th>Tagname</th> 
 
      <th>Value</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     { 
 
      this.props.data.map((row, i) => (
 
       <tr className={this.state.selectedIndex === i ? 'selected' : ''} key={i}> 
 
        <td> 
 
         {row.tagName} 
 
        </td> 
 
        <td> 
 
         {row.value} 
 
        </td> 
 
       </tr> 
 
      )) 
 
     } 
 
     </tbody> 
 
    </table> 
 
    ); 
 
    } 
 
}); 
 

 
const data = [ 
 
    {tagName: "category 1", value: 100}, 
 
    {tagName: "category 2", value: 100}, 
 
    {tagName: "category 3", value: 100}, 
 
    {tagName: "category 4", value: 100} 
 
] 
 

 

 
ReactDOM.render(
 
    <Hello data={data} />, 
 
    document.getElementById('container') 
 
);

.selected { 
 
    background: red 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="container" />