Question

假设我的页面上有一个“用户信息”弹出窗口，“供稿”弹出窗口，“菜单”弹出窗口组件以及更多弹出窗口。如果我打开任何弹出窗口，其余的弹出窗口将关闭。如果我点击外面，所有这些都会关闭。

如何处理redux或redux-react-local中的弹出状态？

如果我添加更多document.addEventListener("click", function)，是否会影响效果？

事件委托如何适用于全局（文档）click，keyPress，...事件？

Answer 1

我会在每个弹出窗口中添加事件处理程序，并让reducers相应地更改状态。每个弹出窗口都有一个ID。单击特定项时，减速器将设置其打开状态，其余部分关闭。

单击外部可能是失去焦点的事件处理程序。我认为你不需要任何全球性的活动。

示例初始状态：

const initialState = {
    popup1: false, // closed
    popup2: false, // closed
    ...
}

减速器示例：

const { popId } = action;
case 'POPUP_CLICKED':
    const newState = { ...initialState };
    newState[popId] = true; // opened
    return { newState };

case 'POPUP_LOST_FOCUS':
    return { ...initialState };

当然，如果你有其他状态属性，不要直接重置状态并迭代，或者可能将名为popups的属性设置为所有弹出窗口的状态并重置它们。无论哪种方式，这些操作集应该足以处理所有边缘情况。

如何在redux中处理弹出状态？

1 个答案: