Изменение содержимого при нажатии и наведении всплывающего элемента реагирует на семантический интерфейс - PullRequest
Новая
       6

Изменение содержимого при нажатии и наведении всплывающего элемента реагирует на семантический интерфейс

0 голосов
/ 26 мая 2018

Я использую всплывающий компонент response-semantic-ui, который вызывает всплывающее окно при наведении / щелчке.Я хочу изменить содержимое в зависимости от того, щелкнул ли элемент триггера или завис.Например: у меня есть набор полей в моем пользовательском интерфейсе.Когда я наведите курсор на каждый блок, он должен вызвать всплывающий элемент, но содержимое должно быть только name, когда блок будет нажат, должны появиться полные сведения.Есть ли способ сделать это или узнать событие?

<Popup
  trigger={
    <span>
      I am the trigger element 
    </span>
  }
  hoverable={false}
  content={'test}
/>

1 Ответ

0 голосов
/ 26 мая 2018

Pallavi Hegde , чтобы сделать это, вам нужно будет самостоятельно контролировать состояние Popup.Прямо сейчас вы полагаетесь на внутреннее контролируемое состояние компонента Popup от semantic-ui-реагировать.

Чтобы выполнить эту работу, вам потребуется создать методы handleOnClick() и handleOnHover(), которые вы можетеиспользовать на вашем компоненте.Вы можете использовать эти методы, чтобы вызвать изменение состояния внутри родительского компонента вашего всплывающего окна, которое изменит содержимое внутри всплывающего окна в зависимости от состояния наведения / щелчка.Передача логической open prop компоненту Popup в основном отключает состояние.

Хороший пример того, как управляемые компоненты работают в semantic-ui-реагировать (что вам нужно) по сравнению с тем, кем вы являетесьв настоящее время используется готовая функциональность, взгляните на этот пример: https://react.semantic -ui.com / modules / popup #, управляемый использованием

...