I have this span:
<span className="close" onClick={this.props.handleClose}><u>Close</u> X</span>
handleClose sets a property which is used to either show or hide a popup. I want to edit this onClick to also call a rest endpoint if updateDocsFlag is set to true by this function:
doIsChecked() {
var isItChecked = document.getElementById('isPless') as HTMLInputElement;
if (isItChecked.checked) {
this.setState({ updateDocsFlag: true });
} else {
this.setState({ updateDocsFlag: false });
}
}
Can that be done? If so I assume if it can it'll be something like creating a function to make the rest call and including it in the onClick but I'm not sure if multiple functions can be called in this way.
handleClose comes from a different class. This is what it looks like:
<Pless handleClose={this.hidePless} showPless={this.state.showPlessPrompt} />
hidePless = () => {
this.setState({ showPlessPrompt: false });
};
In my Pless class I have this interface:
interface Props {
handleClose: () => void;
showPless: boolean;
}
<span className="close" onClick={this.props.onclick}><u>Close</u> X</span>
// basically this is what you want no?
const onclick = () => {
handleClose();
doIsChecked();
};
If you need the event then you can pass it from the onclick function to the handleClose or doIsChecked
Update:
Actually the script above is more general. In your case it would probably look like this:
<span className="close" onClick={onclick}><u>Close</u> X</span>
.
const onclick = () => {
this.props.handleClose();
doIsChecked();
};