使用 React Hooks 在 table 中实现显示更多按钮

Question

我正在尝试在 table 上与客户及其项目一起实施显示更多按钮。这是我的代码

<tbody className="text-gray-700">
  {clients.map((client, i) => (
    <tr key={i} className="border-b-2">
      <td className="pl-2">
        <div className="flex flex-col">
          <span className="ml-3 text-lg font-bold">{client.name} </span>
        </div>
      </td>

      <td className="text-center">
        {projects
          .filter((project) => project.client_id === client.id)
          .slice(0, numberOfItems)
          .map((filterProject, key) => (
            <div key={filterProject.id} className="text-left mb-1 w-2/3">
              <div className="cursor-pointer text-base">
                {filterProject.label}
              </div>
            </div>
          ))}
        <a
          className=" text-buttonColor float-left text-left cursor-pointer text-sm"
          onClick={() => setShowMore(!showMore)}
        >
          click for more
        </a>
      </td>
    </tr>
  ))}
</tbody>

哪里

const [ showMore, setShowMore ] = useState(false)
const numberOfItems = showMore ? projects.length : 3

问题是当我点击show more时显示了所有客户的所有项目，而我只需要显示一个被点击的客户的所有项目。有人知道如何纠正这个问题吗？

Answer 1

一种方法是将 showMore 更改为使用数字而不是 true/false。在开始时将其设置为 -1 并将其更改为地图函数的迭代器：onClick = {(i)=>setShowMore(i)}

那么你所要做的就是在显示更多之前检查是否i === showMore。

当你想删除你正在显示的内容时，只需将它设置回 -1

Answer 2

showMore 状态应包含您当前希望扩展的客户端的 id，如果 none.

，则应包含 null

const [ showMore, setShowMore ] = useState(null)

然后您可以相应地为客户划分查看项目的数量：

<td className="text-center">
  {projects
    .filter((project) => project.client_id === client.id)
    .slice(0, showMore === client.id ? projects.length : 3) // slice according to the selected id
    .map((filterProject, key) => (
      <div key={filterProject.id} className="text-left mb-1 w-2/3">
        <div className="cursor-pointer text-base">
          {filterProject.label}
        </div>
      </div>
    ))}
  <a
    className=" text-buttonColor float-left text-left cursor-pointer text-sm"
    onClick={() => setShowMore(showMore === null ? client.id : null)}  // set the currently expended item
  >
    click for more
  </a>
</td>

Answer 3

我写sandbox为你的实现

使用 React Hooks 在 table 中实现显示更多按钮

Implement show more button in table using React Hooks

html-table

reactjs

react-hooks