语义化的React UI弹出框关闭按钮

Question

我正在使用semantic-react-ui的Popup组件，想知道如何在不使用jQuery的情况下通过单击弹出窗口内的按钮触发关闭弹出窗口事件。

谢谢。

- riyoz

Answer 1

根据文档，您需要创建一个受控弹出层。
创建一个组件来嵌套Popup组件，并在其中保持状态。

class ControlledPopup extends React.Component {
  constructor() {
    super();
    this.state = {
      isOpen: false
    };                  // state to control the state of popup
  }
  
  handleOpen = () => {
    this.setState({ isOpen: true });
  }
  
  handleClose = () => {
    this.setState({ isOpen: false });
  }
  
  render() {
    return (
      <div>
        <Popup
          trigger={<button>click to open</button>}
          content={<button onClick={this.handleClose}>click to close</button>}
          on='click'
          open={this.state.isOpen}
          onOpen={this.handleOpen}
        />
      </div>
    );
  }
}

- Dane

---

我会将 onClose={this.handleClose} 添加进去，以启用在菜单外部点击时关闭的默认行为。 - Julio Feferman

我可以在内容中添加多个按钮吗？我想在弹出窗口中显示确认和关闭按钮。 - Anubhav Gupta

如果您在同一页上有多个弹出窗口怎么办？很遗憾，这个解决方案会将它们全部打开。 - mvidalgarcia

你必须通过在状态中使用不同的键来命名空间状态，例如 isPopup1Open、isPopup2Open 等等。 - Dane

请注意文档已经更改。以下是更新版本链接：https://react.semantic-ui.com/modules/popup/#usage-controlled - Mr Washington

Answer 2

这是上述内容的TS + React Hooks版本：

import { FC, useState } from 'react';

import { Popup } from 'semantic-ui-react';

const ControlledPopup: FC = () => {
    const [isOpen, setIsOpen] = useState(false);
    return (
        <Popup
            trigger={<button>click to open</button>}
            content={<button onClick={() => setIsOpen(!isOpen)}>click to close</button>}
            on="click"
            open={isOpen}
            onOpen={() => setIsOpen(!isOpen)}
        />
    );
};

export default ControlledPopup;

- Mr Washington