如何在Semantic-React-UI的Popup组件内通过按钮触发关闭事件（不使用jQuery）

没问题！在Semantic UI React里实现这个需求完全不需要依赖jQuery——核心是用受控组件的思路，通过React的状态来控制弹窗的显示与隐藏，下面是具体的实现方案：

函数组件实现（推荐） #

利用React的useState钩子来管理弹窗的打开/关闭状态，直接绑定到Popup组件的open属性上，内部按钮通过修改状态来关闭弹窗：

import React, { useState } from 'react';
import { Popup, Button } from 'semantic-ui-react';

const ControlledPopup = () => {
  // 定义状态控制弹窗是否打开
  const [isPopupOpen, setIsPopupOpen] = useState(false);

  return (
    <div>
      {/* 触发弹窗的外部按钮 */}
      <Button onClick={() => setIsPopupOpen(true)}>点击打开弹窗</Button>

      {/* 受控模式的Popup组件 */}
      <Popup
        open={isPopupOpen}
        // 如果不需要默认的trigger触发逻辑，可以用空元素占位
        trigger={<span />}
        content={
          <div style={{ padding: '1rem' }}>
            <p>这是弹窗的自定义内容</p>
            {/* 弹窗内部的关闭按钮，点击时修改状态关闭弹窗 */}
            <Button 
              onClick={() => setIsPopupOpen(false)} 
              size="small" 
              style={{ marginTop: '0.5rem' }}
            >
              关闭弹窗
            </Button>
          </div>
        }
        position="bottom center"
        // 可选：如果希望点击弹窗外部也关闭，可以加上这个属性
        onClose={() => setIsPopupOpen(false)}
      />
    </div>
  );
};

export default ControlledPopup;

类组件实现 #

如果你还在使用类组件，思路是一样的，通过this.state来管理状态：

import React from 'react';
import { Popup, Button } from 'semantic-ui-react';

class ControlledPopupClass extends React.Component {
  state = {
    isPopupOpen: false
  };

  openPopup = () => {
    this.setState({ isPopupOpen: true });
  };

  closePopup = () => {
    this.setState({ isPopupOpen: false });
  };

  render() {
    return (
      <div>
        <Button onClick={this.openPopup}>点击打开弹窗</Button>
        <Popup
          open={this.state.isPopupOpen}
          trigger={<span />}
          content={
            <div style={{ padding: '1rem' }}>
              <p>类组件版弹窗内容</p>
              <Button 
                onClick={this.closePopup} 
                size="small" 
                style={{ marginTop: '0.5rem' }}
              >
                关闭弹窗
              </Button>
            </div>
          }
          position="bottom center"
          onClose={this.closePopup}
        />
      </div>
    );
  }
}

export default ControlledPopupClass;

关键说明 #

• 这种方式完全基于React的状态管理，不需要任何jQuery依赖，符合Semantic UI React的设计理念
• open属性是控制Popup显示的核心，只要修改这个绑定的状态变量，就能自由控制弹窗的打开和关闭
• 如果你需要Popup绑定到某个特定元素（比如输入框），可以保留trigger为目标元素，同时依然用open状态控制，这样点击trigger和内部按钮都能交互

内容的提问来源于stack exchange，提问作者riyoz