#reactjs #reactcsstransitiongroup
Вопрос:
Я пытаюсь использовать ReactCSSTransitionGroup для анимации эффекта скольжения/скольжения ряда модалов. Поля ввода модала определяются конфигурацией и динамически отображаются в зависимости от значений файла конфигурации.
import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup' const Content = ({ modalContent }) =gt; { return ( {/* Other random stuff */} { modalContent amp;amp; modalContent.element amp;amp; ( lt;ReactCSSTransitionGroup transitionName='somename' transitionEnterTimeout={500} transitionLeaveTimeout={500} gt; {React.createElement(modalContent.element)} lt;/ReactCSSTransitionGroupgt; ) } ) } CSS
.somename-enter { transform: translate(100%); z-index: 1; } .somename-enter-active { transform: translate(0%); transition: transform 300ms ease-in-out; z-index: 1; } .somename-leave { transform: translate(0%); } .somename-leave-active { transform: translate(0%); } В настоящее время модальные переходы страниц ведут себя красиво. Компоненты хорошо визуализированы, а эффекты перехода «вход» и «выход» великолепны.
Одна из проблем, с которой я сталкиваюсь, заключается в том, что при переходе я больше не могу нажать на поле ввода, чтобы ввести информацию. Однако я могу перейти в это поле, но как только я оставлю фокус, я все равно больше не смогу щелкнуть мышью по этому полю.
У меня установлена версия 1.2.1 react-transition-group .
Я пробовал отлаживать это совсем немного и, похоже, не могу понять, что может быть причиной этого. Удаление ReactCSSTransitionGroup тегов заставляет страницы вести себя так, как они должны (хотя и без эффектных переходов), а добавление их обратно снова вызывает проблему.
Способ создания полей ввода заключается в том, что в своей componentWillMount функции он выходит и извлекает с помощью некоторого API-вызова схему формы для этой страницы, а затем отображает ее. Например, на одной странице могут быть два поля ввода текста и кнопка, а на другой странице может быть элемент текстовой области и ряд переключателей.
При введении ReactCSSTransitionGroup я вообще не могу взаимодействовать с каким-либо полем ввода текста с помощью мыши.
Любая помощь будет очень признательна.