React Select внутри семантического интерфейса - PullRequest
Новая
       31

React Select внутри семантического интерфейса

0 голосов
/ 19 декабря 2018

У меня есть простая React Select в качестве содержимого в компоненте Semantic UI React Popover.Я ограничен каждой версией пакета внутри проекта (доступно в следующих кодах и в поле https://codesandbox.io/s/wy194rz908):

  • React: ~15.5.0
  • ReactDOM: ~15.5.0
  • React-Select: ^2.1.1
  • Semantic UI React: 0.71.5

Как видите, параметры React Select закрываются, когда выбор сделан.

С другой стороны, я обнаружил, что обновление React, React-DOM и SemanticUI до их последних версий делает эту функцию работоспособной. Как вы можете видеть, выбор сделан, а параметры выбора не сворачиваются (доступно в следующих кодах и в окошкеhttps://codesandbox.io/s/6y14qyykk3).

Поскольку я не могу обновить обновление React и SUIR, какой обходной путь я должен использовать, чтобы сделать эту работу?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Вы должны использовать Controlled Popup Component, как указано в документах: 

import React from 'react'
import { Button, Popup } from 'semantic-ui-react'

class PopupExampleContextControlled extends React.Component {
  state = {}

  toggle = () => this.setState({ open: !this.state.open })

  handleRef = node => this.setState({ node })

  render() {
    const { node, open } = this.state
    return (
      <div>
        <Button content='Open controlled Popup' onClick={this.toggle} />
        <Popup context={node} content='Hello' position='top center' open={open} />
        ---------->
        <strong ref={this.handleRef}>here</strong>
      </div>
    )
  }
}

export default PopupExampleContextControlled

Таким образом, вы можете контролировать, когда всплывающее окно открывается и закрывается.

0 голосов
/ 19 декабря 2018

Я управляю всплывающим окном, используя опору open, доступную через его props api.Я меняю его состояние с истинного на ложное, нажимая кнопку со значком каретки вниз.

Решение: https://codesandbox.io/s/rmoxx98qkn

...