I want to Open a Modal window when i Click on a button. You can find the complete code below.
When i clic the button, the handleClickOpen function is correctly trigerred (the debug console print the trace i have added). Unfortunatly, the modal never Open. I think i have a problem with the manage of my state.
Any help would be appreciated. Thanks !
var PleadeToolLinkArk = function (_Component) {
_inherits(PleadeToolLinkArk, _Component);
function PleadeToolLinkArk(props) {
_classCallCheck(this, PleadeToolLinkArk);
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
_this.state = {
open: props.open
};
_this.state.open = false;
_this.handleClickOpen = _this.handleClickOpen.bind(_this);
_this.handleClose = _this.handleClose.bind(_this);
return _this;
}
PleadeToolLinkArk.prototype.handleClickOpen = function handleClickOpen() {
console.log('In PleadeToolLinkArk.prototype.handleClickOpen');
console.log(this.state.open);
this.setState({ open: true });
};
PleadeToolLinkArk.prototype.handleClose = function handleClose() {
console.log('in 3333');
this.setState({ open: false });
};
PleadeToolLinkArk.prototype.render = function render() {
var _props = this.props,
label = _props.label,
variant = _props.variant,
otherProps = _objectWithoutProperties(_props, ['label', 'variant']);
return React.createElement(
MiradorMenuButton,
_extends({
'aria-label': label
}, otherProps),
React.createElement(LinkSharpIcon, { onClick: this.handleClickOpen },
React.createElement(
Dialog,
{ open: this.state.open, onClose: this.handleClose },
// Dialog content goes here
React.createElement('p', null, 'This is a dialog content.'),
React.createElement(
Button,
{ onClick: this.handleClose, color: 'primary' },
'Close'
)
)
)
);
};
return PleadeToolLinkArk;
}(Component);
export { PleadeToolLinkArk as default };
PleadeToolLinkArk.propTypes = process.env.NODE_ENV !== "production" ? {
containerId: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
variant: PropTypes.string.isRequired
} : {};```