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

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

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

reactjs semantic-ui-react
person Pallavi Hegde    schedule 26.05.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

person brianespinosa    schedule 26.05.2018