React Select 在语义 UI React 中答案

【问题标题】：React Select inside Semantic UI ReactReact Select 在语义 UI React 中
【发布时间】：2019-05-19 21:45:20
【问题描述】：

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

反应：~15.5.0
ReactDOM：~15.5.0
反应选择：^2.1.1
语义 UI 反应：0.71.5

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

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

由于我无法更新 React 和 SUIR，我应该遵循什么解决方法才能使其正常工作？

谢谢！

【问题讨论】：

标签： reactjs react-select semantic-ui-react

【解决方案1】：

我正在使用通过其 props api 提供的 open 道具控制弹出窗口。单击插入符号图标按钮时，我将其状态从 true 更改为 false。

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

【讨论】：

如果你点击文本框，那么外面的文本框弹出窗口仍然会关闭
是的，我仍然需要修复设置 onBlur 的位置

【解决方案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

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

【讨论】：