如何在 React JS 中单击按钮时加载不同的内容（与已加载内容不同的内容）答案

【问题标题】：How to load different content(content which is different from already loaded content) on button click in React JS如何在 React JS 中单击按钮时加载不同的内容（与已加载内容不同的内容）
【发布时间】：2019-02-19 07:28:41
【问题描述】：

我在反应引导表中显示来自 json 的结果。单击比较时，结果会在表中过滤。现在我想重新加载并在单击“比较”时以不同的表格格式显示所选产品。页面应该重新加载，然后只有选定的产品应该显示在表格中，标题垂直对齐。有人可以帮忙吗？完整代码在这里 - https://codesandbox.io/s/o4nw18wy8q

点击比较时的预期输出样本 -

【问题讨论】：

标签： reactjs

【解决方案1】：

可能你需要在你的类中有一个函数来根据filter status 的状态返回两个不同的视图。如果过滤状态不为真，则显示普通视图，如果filter status为true，则在上面的视图中显示你刚才提到的view。就设计而言，您应该能够制定表格设计。

当你点击clear时，你应该将过滤器状态设置回false

这不是一个完整的工作代码。我只是给你一些想法。

这是一个代码框 https://codesandbox.io/s/2x450x3rqn

【讨论】：

【解决方案2】：

你可以从函数中返回一个视图

onButtonClick = () => {
...
...
return <BootstrapTable
          keyField="PartNumber"
          selectRow={updatedData}
          data={updatedData}
          columns={updatedData}
        />
}

【讨论】：