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 => (
  <ListRow handleMenuOpen={handleMenuOpen}/>
  <Menu handleItemDelete={handleItemDelete} item={item} />)}

现在在菜单容器或组件中，您将拥有该项目并将其传递给菜单项

Answer 2

我以前也遇到过同样的问题。我认为你应该处理子组件中的弹出窗口切换，就像这样。

function Parent() {

    function handleDelete(item) {

        deleteFunction(item.id)

    }

    return (

        <div>

            {[].map((item, index) => {

                return (

                    <ListRowItem key={index} handleDelete={handleDelete} item={item} />

                )

            })}

        </div>

    )

}

function ListRowItem({handleDelete, item}) {

    const [isMenuOpen, setIsMenuOpen] = useState(false)

    const [isModelVisible, setIsModalVisible] = useState(false)

    return (

        <div>

            <Button onClick={isMenuOpen === true ? () => setIsMenuOpen(true) : () => setIsMenuOpen(false)} />

            {isModelVisible === true ? <ModalItem /> :null}

            {isMenuOpen === true ? 

                <div>

                    <MenuItem onClick={() => setIsModalVisible(true)} />

                    <MenuItem onClick={() => handleDelete(item.id)} />

                </div>

            : null}

        </div>

    )

}

Answer 3

您可能应该只传递handleMenuOpen 函数并依赖于所选元素，然后将其id 存储在itemID 变量中。

const handleMenuOpen = (e) => {

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

    setItemID(e.currentTarget.id);

};

  

  

<MenuItem onClick={handleMenuOpen} />;