Question

每个表行都必须允许用户单击它并获取与该行有关的信息子集。我做了一些搜索并找到了这个帖子：Twitter Bootstrap Use collapse.js on table cells [Almost Done]

我得到了这个解决方案sorta处理我的代码，但我遇到一个问题，我只得到一个隐藏的行显示在表的底部作为最后一行，而不是在每个单独的行映射从葡萄藤阵。

这是我的代码：

          <div className="card-block">
              <Table hover bordered>
                  <thead>
                  <tr className="table-heading">
                      <th className="table-header">Entity</th>
                      <th className="table-header">Category</th>
                      <th className="table-header">Source</th>
                      <th className="table-header">Risk Score</th>
                  </tr>
                  </thead>
                  <tbody>
                  {this.state.gvEntries.map(grapevine => (
                    <tr data-toggle="collapse" data-target="#demo1" className="accordion-toggle">
                        <td>{grapevine.entity}</td>
                        <td>{grapevine.category}</td>
                        <td>{grapevine.source}</td>
                        <td>{grapevine.rscore}</td>
                    </tr>
                  ))}
                  <tr >
                      <td colSpan="6" className="hiddenRow"><div className="accordian-body collapse" id="demo1"> Demo1 </div></td>
                  </tr>
                  </tbody>
              </Table>
            </div>

任何帮助将不胜感激，谢谢！

Answer 1

持有隐藏行的tr应移动到map函数内部，data-target属性和id应该是变量（ex index）

类似的东西：

map((grapevine, idx) => (
  <tr data-toggle="collapse" data-target={"#demo"+idx} className="accordion-toggle">
  ...
  <tr >
    <td colSpan="6" className="hiddenRow"><div className="accordian-body collapse" id={"#demo"+idx}> Demo1 </div></td>
  </tr>
)

Answer 2

data.map(sale => {
            return (
              <tbody key={sale.id}>
                <tr id={sale.id} onClick={handleCollapse}>
                  <td>
                    <a className="no">{sale.id}</a>
                  </td>
                  <td>{date.utcToLocal(sale.createdOn)}</td>
                </tr>
                { toggleDetails && 
                 <tr>
                  <td>Order Details is here must be</td>
                </tr> }
              </tbody>
            );
          })}

使用Bootstrap 4和ReactJS创建可折叠表格单元格

2 个答案: