在 React 中的 table 上创建可扩展行的简单方法是什么？

Question

我试着查找它，但除了库之外什么都没有，对于这样一个简单的任务来说有点大。我很好奇你们中是否有人知道 table 行的 onclick 事件的简单方法，它将展开并显示有关该行的信息？

Answer 1

它可能没有在任何库中解释，因为它真的很简单。如果该行已切换，则仅显示您感兴趣的信息。在您的数据源中，您需要为每个可扩展行设置一个标志。

const [rows, setRows] = useState([
  { ...rowContent, isExpanded: false }
]);

之后，在将行映射到内容并呈现它们的 UI 中，您需要显示一个 UI 元素，该元素将切换行的 isExpanded 状态或简单地切换单击它，逻辑相同。

<div className="row" onClick={() => {
  setRows(rows => {
    const newRows = [...rows];
    newRows[rowIndex].isExpanded = !newRows[rowIndex].isExpanded;
    return newRows;
  });
}>
  {...shortRowContent}
  {rows[rowIndex].isExpanded && (
    {...fullRowContent}
  )}
</div>

在 React 中的 table 上创建可扩展行的简单方法是什么？

What is an easy way to create expandable rows on a table in React?

javascript

reactjs

reactstrap