javascript - 语义 react ui 弹出关闭按钮

Question

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

谢谢

Answer 1

根据docs ，你必须创建一个受控的 Popup。
创建一个嵌套 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>
    );
  }
}