React Material Modal TransitionProps не срабатывает при входе
Итак, я работаю над обновлением Material UI до v5, и сначала я получил сообщение об ошибке, что onEntering устарел, и я должен использовать переходные реквизиты.
У меня есть метод, назовем его doSomething, который я хочу запускать при открытии модального окна.
Если я сделаю это так, у меня нет ошибок, но doSomething не вызывается при открытии модального окна:
<Modal
TransitionProps = {{ onEntering: (): void => doSomething() }}
>
...
</Modal>
С другой стороны, если я сделаю следующее, будет вызван бесконечный цикл doSomething, а также ошибка о void is not assignable to type ((node: HTMLElement, isAppearing: boolean) => void) | undefined
<Modal
TransitionProps= {{ onEntering: doSomething() }}
>
...
</Modal>
Я проверил документацию по обновлению материала, и в ней нет хороших примеров того, что делать при назначении функции/метода, который будет вызываться во время переходов.
Это просто показывает, что вместо onEntering = {doSomething} использовать TransitionProps = {{ onEnter, onEntering, etc. }}, что не помогает в отношении того, как установить onEntering для вызова функции.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Ваша проблема может быть связана с тем, что TrasitionProps существует в диалоговом окне , а не в модальном (Dialog наследуется от Modal, который, в свою очередь, наследуется от безголового нестилизованного модального окна @mui/base).
Модальный
Если вы пытаетесь обработать эти события на Modal, вы должны передать обработчики своему собственному компоненту перехода (в моем примере я использовал Fade):
import Modal from "@mui/material/Modal";
import Fade from "@mui/material/Fade";
...
<Modal open = {open}>
<Fade
onEntered = {handleEntered}
onExiting = {handleExiting}
onExited = {handleExited}
in = {open}
>
...
</Fade>
</Modal>
Работающий CodeSandbox: https://codesandbox.io/s/spring-field-sw9fxq?file=/demo.js
Диалог
Если вы пытаетесь обработать эти события в Dialog, вы должны передать обработчики через TransitionProps в Dialog:
import Dialog from "@mui/material/Dialog";
...
<Dialog
open = {open}
TransitionProps = {{
onEntered: handleEntered,
onExiting: handleExiting,
onExited: handleExited
}}
>
...
</Dialog>
Работающий CodeSandbox: https://codesandbox.io/s/jolly-sanne-0t5mks?file=/demo.js
Таким образом, переключение его с модального на компонент диалогового окна, а затем использование атрибута TransitionProps для диалогового окна, похоже, решило проблему без необходимости дополнительной тяжелой работы. Попытка поместить компонент перехода внутрь модального компонента вызывала больше проблем, но второй вариант работал хорошо и чисто. Спасибо!
Итак, да, этот модальный элемент не имеет ничего похожего на компонент Fade. Я вставлю это и посмотрю, что произойдет.