我有如下所示的模态可见性状态
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] });
};
请推荐。谢谢
答案 0 :(得分:0)
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))
答案 1 :(得分:0)
您可以在组件外部使用一个名为 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] }));
};
}
答案 2 :(得分:0)
我通过复制状态并首先进行操作然后更新状态来实现此目的
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();
})
})
答案 3 :(得分:0)
您可以更改定义状态的方式。如果您的用例是在任何给定点只保持一个模式打开,而不是为每个模态存储布尔值,您可以将状态名称存储为字符串。
关于这一点:
// 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()
答案 4 :(得分:0)
为模态创建默认状态
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
。