只将单击的索引传递给道具

Question

当我单击编辑时，我有一个呈现角色列表的父组件，我只想让我选择的索引通过子组件弹出显示

目前，当切换OpenEdit时，我得到了数据角色[]的完整列表，我希望角色[0]等只显示

我试着在onclick中切换OpenEdit(index(，但它说预期的0个参数得到了1…我错过了什么？？

PARENT 
const roles = [
{role: 'Admin', created_on: '1/1/2019', status: "active", permissions: "add order, 
update order" },
{role: 'Admin II', created_on: '12/1/2019', status: "active", permissions: "add order, 
update order, delete order, refund" },
{role: 'Support', created_on: '2/1/2021', status: "active", permissions: "edit order, 
update order" },
{role: 'Support II', created_on: '10/15/2020', status: "inactive", permissions: "add 
order, update order, some other thing" },
{role: 'Owner', created_on: '1/1/2019', status: "active", permissions: "add order, 
update order, change inventory, refund, delete, remove users" },
]

export default function accounts() {
const [openEdit, setOpenEdit] = useState(false);
const toggleOpenEdit = () => {  setOpenEdit(!openEdit)};
return (
<table className="min-w-full divide-y divide-gray-300">

<tbody className="divide-y divide-gray-200 bg-white">
{roles.map((role, index) => (
<tr key={index}>
<td className=" whitespace-nowrap  text-sm font-medium ">
<DotsVerticalIcon
onClick={toggleOpenEdit.bind(index)}
className={'text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500'}
aria-hidden="true"
/>
</td> <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font- 
medium text-gray-900 sm:pl-6">
{roles.role}
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> 
{role.created_on}</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> 
{role.status}</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> 
{role.permissions}</td>
</tr>
))}
</tbody>
</table>

<div className={"columns-1 mx-5"}>  
** child -> ** {openEdit ? <Edit roles={roles}/> : null }</div>
</div>   

</div>
</Theme>
)
}

子组件____

<div className=" mt-2 transform px-2 sm:px-0">
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow- 
hidden">

<div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
<h2>Edit User</h2>

<div className="-m-3 p-3 block rounded-md hover:bg-gray-50" >
<p className="text-base font-medium text-gray-900">{roles.role}</p>
<p className="mt-1 text-sm text-gray-500">{roles.created_on}</p>
<p className="mt-1 text-sm text-gray-500">{roles.status}</p>
<p className="mt-1 text-sm text-gray-500">{roles.permissions}</p>
</div>

</div>
</div>
</div>

Answer 1

问题的简短答案是，您需要将单个角色传递给具有类似roles[i]的道具。因此，这意味着您需要有一种方法来传递要使用的正确索引。看起来您正试图使用onClick={toggleOpenEdit.bind(index)}来执行此操作，但toggleOpenEdit不接受任何参数，因此此处忽略index。您需要找到一种方法来修复此问题，以跟踪要使用的index。这很可能需要状态，以便在再次渲染组件时，它使用正确的角色进行渲染。

Answer 2

const [openEdit, setOpenEdit] = useState(undefined);                    
<DotsVerticalIcon
onClick={(index) => setOpenEdit(index)}
className={`text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500`}
aria-hidden="true"
/>
** child -> ** { <Edit roles={openEdit ? roles.[openEdit] : {}}/> }</div>

不确定这是否是你想要的答案，但是：

我们从角色中传递当前单击的角色。map(….(初始化它是未定义的，因为我们不想在加载时显示任何内容。而且你不需要.bind((，这是在类组件中使用的

Answer 3

我接受了你的两个答案，并将它们一起计算

我单独设置了索引，并使其工作

const [openEdit, setOpenEdit] = useState(false);
const [i, setI] = useState(Number);  
const toggleOpenEdit = (index) => { 
setOpenEdit(!openEdit)
setI(index)
};  
{openEdit ? <Edit roles={roles[i]} /> : null }</div>

现在我们的popover只显示点击表中项目的数据！