Question

我在反应项目中使用bootstrap表。我有一个表格可以从这样的标签中获取数据：

<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

我无法确切地告诉您正在使用哪个表（您的标记看起来与react-bootstrap-table略有不同）

但假设您只使用带有表的普通引导程序。你可以这样做。我创建了一个计时器，我每隔一秒更改一次状态选择的行。然后我添加一个类（您可以使用内联样式，具体取决于项目的结构），将背景设置为红色到所选行的行。

https://jsfiddle.net/nacj5pt4/

＆＃13;

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')
);

＆＃13;

.selected {
  background: red
}

＆＃13;

<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" />

＆＃13;

动态更改特定行引导表的颜色

1 个答案: