CODEWITHSUNDEEP
javascripttypescriptreact-component
runnerpaul
runnerpaul

Reputation: 7256

call multiple functions in onClick

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;
}

Upvotes: 1

Views: 2571

Answers (1)

Hkrie
Hkrie

Reputation: 127

<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();
};

Upvotes: 2

Related Questions