React Select inside Semantic UI React

Question

我在 Semantic UI React Popover 组件中有一个简单的 React Select 作为内容道具。我受到项目中每个包版本的限制（在以下代码和框https://codesandbox.io/s/wy194rz908中可用）：

反应：~15.5.0
反应DOM：~15.5.0
React-Select：^2.1.1
语义UI反应：0.71.5

如您所见，React Select 选项会在选择完成后关闭。

另一方面，我发现将 React、React-DOM 和 SemanticUI 更新到最新版本可以使该功能发挥作用。如您所见，选择完成并且 Select 选项没有折叠（在以下代码和框 https://codesandbox.io/s/6y14qyykk3 中可用）。

由于我无法更新 React 和 SUIR，我应该遵循什么解决方法才能完成这项工作？

谢谢！

Answer 1

我使用 open 道具 api 控制 Popup。单击插入符号向下图标按钮时，我将其状态从 true 更改为 false。

解决方案：https://codesandbox.io/s/rmoxx98qkn

Answer 2

您必须使用 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

通过这种方式，您可以控制弹出窗口何时打开和关闭。

React Select inside Semantic UI React

React Select inside Semantic UI React

reactjs

react-select

semantic-ui-react