我正在使用semantic-react-ui的Popup组件,我想知道如何通过单击弹出窗口内的按钮而不使用jquery来触发关闭弹出事件。
谢谢
答案 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;