Сервис быстрых ответов от искусственного интеллекта
Вопрос пользователя:
Ответ нейросети:
Чтобы компонент, обернутый в Modal, закрывался по клику на кнопку закрытия, вам нужно передать функцию onClose в компонент Modal и вызывать эту функцию при клике на кнопку закрытия.
В вашем коде компонент Modal принимает prop onClose, но в настоящее время эта функция ничего не делает. Чтобы закрыть модальное окно по клику на кнопку закрытия, вам нужно вызвать onClose в обработчике события клика на кнопку закрытия.
Например, вы можете изменить компонент Modal следующим образом:
export const Modal: FC = memo(({ title, onClose, children }) => {
useEffect(() => {
const handleEsc = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
onClose();
}
};
document.addEventListener('keydown', handleEsc);
return () => {
document.removeEventListener('keydown', handleEsc);
};
}, [onClose]);
return ReactDOM.createPortal(
<>
<button onClick={onClose}>Close</button>
{children}
</>,
modalRoot as HTMLDivElement
);
});
Теперь, когда вы передаете функцию onClose в компонент Modal через prop onClose, и вызываете эту функцию при клике на кнопку закрытия, модальное окно будет закрываться.
В вашем компоненте App вы можете передать функцию, которая будет устанавливать состояние isOpen в false при закрытии модального окна:
function App() {
const dispatch: ThunkDispatch<RootState, unknown, AnyAction> = useDispatch();
const [isOpen, setIsOpen] = useState(true);
useEffect(() => {
dispatch(fetchIngredients());
}, [dispatch]);
const handleCloseModal = () => {
setIsOpen(false);
};
return (
<>
{/* Your other routes */}
<Route path="/feed/:number" element={<Modal title='Информация о заказе' onClose={handleCloseModal}>} />
<Route path="/ingredients/:id" element={<Modal title='Детали ингредиента' onClose={handleCloseModal}>} />
<Route path="/profile/orders/:number" element={<Modal title='Заказ' onClose={handleCloseModal}>} />
</>
);
}
Теперь, когда вы передаете функцию handleCloseModal в компонент Modal через prop onClose, и вызываете эту функцию при клике на кнопку закрытия, модальное окно будет закрываться и состояние isOpen будет устанавливаться в false.
Обратите внимание: ответы, предоставляемые искусственным интеллектом, могут не всегда быть точными. Не рассчитывайте на них в критически важных областях, таких как медицина, юриспруденция, финансы или в вопросах, связанных с безопасностью. Для важных решений всегда обращайтесь к квалифицированным специалистам. Администрация сайта не несет ответственности за контент, сгенерированный автоматически.