我是React的新手,我在如何处理这个逻辑方面遇到了麻烦:
本质上我是使用flexbox创建一个表格,我也想要它,这样当你点击其中一行时,它会展开并显示另一行(例如,它会给出一个小描述它是什么)。
到目前为止,我所拥有的只是表格。
class Application extends React.Component {
render() {
const renderDataRows = (
[
<div key={0} className='row'>
<div className='cell description'> Mortage Bill
</div>
<div className='cell amount'>$0,000,000</div>
<div className='cell amount'>$2.50</div>
<div className='cell amount'v>000%</div>
</div>,
<div key={1} className='row'>
<div className='cell description'> Electric Bill
</div>
<div className='cell amount'>$0,000,000</div>
<div className='cell amount'>$2.50</div>
<div className='cell amount'v>000%</div>
</div>,
]
)
const containerTable = (
<div className='table-container'>
{renderDataRows}
</div>
)
return (
<div>
{containerTable}
</div>
)
}
}
更具体地说,构建隐藏行的最佳方法是什么?创建细胞或兄弟姐妹的孩子?
我假设我需要状态来跟踪当前打开的内容等等?
我附上了Codepen链接到乱七八糟的地方
答案 0 :(得分:1)
这可以通过以下方式完成:
让所有cells
都在一个父div中,让单元格描述成为另一个兄弟div(虽然使用会更好)。在兄弟div上放一个课,例如hidden
。不在cells
div上添加点击处理程序。只要单击此div,就用该div的id / key更新状态。现在使用此选项将 hidden
类设置为其他div。将 this.state.key
与当前ID /键进行比较,然后相应地显示或隐藏。我没有给出具体的代码。
注意:不是将div存储在renderDataRows中,只需将数据放入其中并映射到它以创建所有div。这样,您可以轻松地在一个位置操作hidden
类和任何其他变体,而无需为每行数据单独更新。