reactjs - 语义 UI React 中的 React Select

Question

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

• react :~15.5.0
• ReactDOM:~15.5.0
• react 选择:^2.1.1
• 语义 UI React:0.71.5

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

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

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

谢谢!

Answer 1

您必须使用受控弹出组件，如文档中所述:

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

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