语义反应ui弹出关闭按钮

时间:2018-02-15 23:25:54

标签: javascript reactjs semantic-ui semantic-ui-react

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

谢谢

2 个答案:

答案 0 :(得分:8)

根据docs,你必须创建一个受控弹出窗口 创建一个嵌套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>
    );
  }
}

答案 1 :(得分:0)

这是上面的 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;