[英]Implement show more button in table using React Hooks
I'm trying to implement show more button on the table with clients and theirs projects.我正在尝试在客户及其项目的桌子上实现显示更多按钮。 This is my code
这是我的代码
<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>
where在哪里
const [ showMore, setShowMore ] = useState(false)
const numberOfItems = showMore ? projects.length : 3
The problem is when I click on show more all projects of all clients are shown, and I need to show all projects of only one client which is clicked.问题是当我点击显示更多所有客户的所有项目时,我只需要显示一个被点击的客户的所有项目。 Anyone have idea how to correct this?
任何人都知道如何纠正这个问题?
One way would be to just change showMore
to use numbers instead of true/false.一种方法是将
showMore
更改为使用数字而不是真/假。 Set it to -1 at the start and change it to the iterator of your map function: onClick = {(i)=>setShowMore(i)}
在开始时将其设置为 -1 并将其更改为 map function:
onClick = {(i)=>setShowMore(i)}
的迭代器
Then all you have to do is check if i === showMore
before showing more.那么你所要做的就是在显示更多之前检查
i === showMore
。
Just set it back to -1 when you want to remove whatever the more is that you are showing当您想删除更多显示的内容时,只需将其设置回 -1
The showMore
state should hold the id
of the client that you currently wish to expend, and null
if none. showMore
state 应该包含您当前希望扩展的客户端的id
,如果没有, null
。
const [ showMore, setShowMore ] = useState(null)
Then you can slice the number of viewed projects for a client accordingly:然后,您可以相应地为客户分割查看的项目数量:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.