Question

我在axios.get('http://api.fightpoverty.online/api/city?page=2') .then(response => { this.items = response.data; $(document).ready(function () { $(".background-image").each(function () { $(this).css("background-image", "url(" + $(this).find("img").attr("src") + ")"); }); }); });组件中有一个简单的leaked broadcast service error作为内容道具。我受项目内每个软件包版本的约束（可在以下codeandbox https://codesandbox.io/s/wy194rz908中找到）：

反应：update the previous one
反应DOM：Check <- as.data.frame(data %>% group_by(CITY) %>% summarise(NumberSizeCity = n_distinct(SURFACE), SURFACE = list(unique(SURFACE))))
反应选择：React Select
语义UI React：Semantic UI React Popover

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

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

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

谢谢！

Answer 1

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

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

Answer 2

我正在使用open道具来控制Popup，该道具可通过其props api获得。单击插入符向下图标按钮时，我将其状态从true更改为false。

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

在语义UI React中选择React

2 个答案: