動態更改引導程序表的特定行的顏色

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> 

我想要什麼：

• 我有一個名爲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" />