I'm using semantic-react-ui's Popup component and I was wondering how to trigger close popup event by clicking a button inside the popup without using jquery.
Thank you
According to the docs, you have to create a controlled Popup.
Create a component which nests the Popup
component, and maintain a state in it:
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>
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With