React：从列表项的弹出菜单中编辑和删除

Question

我有一个列表容器组件，它是父组件。它映射出列表行。在列表行组件（即子组件）上，每个项目都有一个用于切换弹出菜单的按钮，该菜单具有一个用于编辑的按钮和一个用于删除的按钮。菜单本身是列表行的同级，因为如果我将其包含在列表行组件中，每一行都会呈现一个菜单，并且在切换时，它们都会堆叠在一起。编辑和删除按钮可以切换编辑表单，也可以直接删除项目。

我目前拥有的是：

// Parent / Container

  const [itemID, setItemID] = useState(null);

  const handleMenuOpen = (id) => (e) => {

    setAnchorEl(e.currentTarget); // for menu placement

    setItemID(id);

  };

  const handleItemDelete = () => {

    dispatch(deleteItem(itemID));

  };

<List>

  <ListRow handleMenuOpen={handleMenuOpen} />

  <Menu handleItemDelete={handleItemDelete}  itemID={itemID} />

</List>;

// List Row

<Button onClick={handleMenuOpen(item.id)} />;

// Menu

<MenuItem onClick={() => handleModalOpen(itemID)} />;

<MenuItem onClick={() => handleItemDelete()} />;

编辑按钮工作正常，但无论我如何尝试，我都无法通过列表项上的 onClick 使 setItemID 工作。它总是以 null 的初始值出现。我控制台记录了函数参数中的 ID 正确输出，但 setState 挂钩不起作用。

我尝试将 useState 放在列表项上并通过 useContext 传递 ID，但在调用handledItemDelete 时结果未定义。

我尝试在子级上使用 ref 从父级获取 ID，结果也是未定义的。

我想不出如何使用 useEffect 来检查 handleMenuOpen 参数的更改。

我没主意了。有人知道问题是什么以及如何解决它吗？

Answer 1

我假设您正在执行某个循环来渲染列表组件内的每个列表行假设所有项目都在您循环的项目数组中：{items.map(item&nbsp;=>&nbsp;( &nbsp;&nbsp;<ListRow&nbsp;handleMenuOpen={handleMenuOpen}/> &nbsp;&nbsp;<Menu&nbsp;handleItemDelete={handleItemDelete}&nbsp;item={item}&nbsp;/>)}现在在菜单容器或组件中，您将拥有该项目并将其传递给菜单项

Answer 2

我以前也遇到过同样的问题。我认为你应该处理子组件中的弹出窗口切换，就像这样。function Parent() {&nbsp; &nbsp; function handleDelete(item) {&nbsp; &nbsp; &nbsp; &nbsp; deleteFunction(item.id)&nbsp; &nbsp; }&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {[].map((item, index) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ListRowItem key={index} handleDelete={handleDelete} item={item} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )}function ListRowItem({handleDelete, item}) {&nbsp; &nbsp; const [isMenuOpen, setIsMenuOpen] = useState(false)&nbsp; &nbsp; const [isModelVisible, setIsModalVisible] = useState(false)&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button onClick={isMenuOpen === true ? () => setIsMenuOpen(true) : () => setIsMenuOpen(false)} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {isModelVisible === true ? <ModalItem /> :null}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {isMenuOpen === true ?&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <MenuItem onClick={() => setIsModalVisible(true)} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <MenuItem onClick={() => handleDelete(item.id)} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : null}&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )}

Answer 3

您可能应该只传递handleMenuOpen 函数并依赖于所选元素，然后将其id 存储在itemID 变量中。const handleMenuOpen = (e) => {&nbsp; &nbsp; setAnchorEl(e.currentTarget); // for menu placement&nbsp; &nbsp; setItemID(e.currentTarget.id);};&nbsp;&nbsp;&nbsp;&nbsp;<MenuItem onClick={handleMenuOpen} />;