Question

我有如下所示的模态可见性状态

  const [openModal, setOpenModal] = useState({
    supplierMenu: false,
    warehouseMenu: false,
    tagsMenu: false,
    storesMenu: false,
    labelModal: false,
  });

现在我有一个功能可以基本上切换模型的可见性状态。

const toggleModal = (modal) => {
    setOpenModal({ ...openModal, [modal]: !openModal[modal] });
  };

我呼吁像这样打开和关闭模态

() => toggleModal("supplierMenu")

现在，我被卡住了。我想在打开新模态之前将所有模态的模态状态更改为假。像这样

 const toggleModal = (modal) => {
        //Close all modals, set all modal values to false then open a new one
        setOpenModal({ ...openModal, [modal]: !openModal[modal] });
      };

请推荐。谢谢

Answer 1

import {map,values} from "lodash"

这应该有效：

const statesKeys = {
    supplierMenu: "supplierMenu",
    warehouseMenu: "warehouseMenu",
    tagsMenu: "tagsMenu",
    storesMenu: "storesMenu",
    labelModal: "labelModal",
}

切换模态：

const toggleModal = (modalKeyArray) => {
        const _state = map(modalKeyArray, modal => ({
                [modal]: !openModal[modal]
            }); setOpenModal({
                ...openModal,
                ..._state
            });
        };

切换一种模态使用 () => toggleModal([statesKeys.supplierMenu])

要全部切换，采用 toggleModal(values(stateKeys))

Answer 2

您可以在组件外部使用一个名为 initialState 的变量。并用它来切换值。

const initialState = {
  supplierMenu: false,
  warehouseMenu: false,
  tagsMenu: false,
  storesMenu: false,
  labelModal: false,
};

const YourComponent = () => {

const [openModal, setOpenModal] = useState(initialState);

const toggleModal = (modal) => {
  setOpenModal(prevModalState => ({ ...initialState, [modal]: !prevModalState[modal] }));
};

}

Answer 3

我通过复制状态并首先进行操作然后更新状态来实现此目的

import React from 'react';
import { fireEvent, render } from '@testing-library/react';
import Login from './Login';

jest.mock('../../stores/UserStore')

beforeEach(() => {
    jest.clearAllMocks()
})

describe('User is logged in', () => {    
    test('Login shows users name after getting current user information', async () => {
        const { getByText } = render(<Login />);
    
        fireEvent.click(getByText('Get Current User Info'));
    
        expect(getByText('Test User')).toBeInTheDocument()
    })
})

describe('User not logged in', () => {
    test('Login should show sign in button', () => {
        const { getByText } = render(<Login />)
        expect(getByText('Sign in')).toBeInTheDocument();
    })
})

Answer 4

您可以更改定义状态的方式。如果您的用例是在任何给定点只保持一个模式打开，而不是为每个模态存储布尔值，您可以将状态名称存储为字符串。

关于这一点：

// state
const [openModal, setOpenModal] = useState("");

// Toggle modal function
const toggleModal = (modalName) => {
  if (modalName) {
    setOpenModal(modalName)
  }
}

const closeAllModals = () => {
  setOpenModal("")
}

// trigger modal
<Button onClick={() => toggleModal("supplierMenu")} />

// how to show the modal
{openModal === "supplierMenu" && <SupplierMenuModal />}

这样您在任何时候都将始终只打开一个模态，并且您不必担心关闭所有其他模态的额外逻辑。当您想关闭所有模式时，只需调用 closeAllModals()

Answer 5

为模态创建默认状态

const defaultState = {
  supplierMenu: false,
  warehouseMenu: false,
  tagsMenu: false,
  storesMenu: false,
  labelModal: false,
}

然后创建你的状态

const [openModal, setOpenModal] = useState(defaultState);

现在，如果你这样做

const toggleModal = modal => setOpenModal({ ...defaultState, [modal]: !openModal[modal] });

理想情况下，这应该首先将所有模态设置为 false，然后根据我们的选择将选定的模态设置为 true/false。

在打开一个新的模态之前关闭另一个模态

5 个答案: