reactjs - 如何在 reactJs 中使用表格添加下一个和上一个按钮？

Question

我有一个从 JSON 插入数据的表。使用 React.Component，创建表如下：

<tbody>
  {DATA.map(x => (
    <tr>
    <td>{x.date}</td>
    <td>{x.name}</td>
    <td>{x.language}</td>
    <td><a href={x.link} target="_blank" class="btn">Click to Listen</a></td>
    </tr>
  ))}
</tbody>

数据显示正确，但我必须在表格中添加下一个和上一个按钮。我怎样才能做到这一点？

至少<tr>应同时显示 5 个。

[![在此处输入图像描述][1]][1]

标签： reactjs

Answer 1

由于您显示的代码如此之少，我假设您正在使用反应，并使用功能组件。

const [ page, setPage ] = useState(0); //create page state

const pageData = useMemo(() => { //use useMemo to memorize the page

     return DATA.slice(page*5, (page*5)+5)
},[page])

const nextPage = () => setPage(prev => prev+1) //next page
const prevPage = () => setPage(prev => prev > 0 ? prev-1 : prev) //prev page - need to add condition here so it doesn't go below 0

参考切片方法

在您的渲染中，使用pageData代替DATA，例如

<tbody>
  {pageData.map(x =>
    <tr>
      <td>{x.date}</td>
      <td>{x.name}</td>
      <td>{x.language}</td>
      <td><a href={x.link} target="_blank" class="btn">Click to Listen</a></td>
    </tr>
  )}
</tbody>

然后，您可以创建按钮来调用nextPage，prevPage例如

<button onClick={nextPage}>Next</button>

您必须添加自己的代码来检查最大页数和最小页数，以免引发错误。

代码沙盒