Call more than one function 'onClick'

Question

Here is my situation:

<button onClick={this.changeTimerStatus.bind(this)}>makeTimerCliccable</button> <button onClick={this.state.hasBeenFinished ? this.confirmHandler : (this.state.hasDest == false || this.state.hasDest == undefined ? this.takeTaskHandler : this.finishHandler)}>

I have two buttons, but I'd like to have just the second one. Also, I'd like to execute this.changeTimerStatus.bind(this) (the function on the first button) together with this.confirmHandler or this.takeTaskHandler when they're running. How can I solve this?

Cat_Enthusiast · Accepted Answer · 2019-05-26 21:36:35Z

This should do it for you. Also here is a sandbox so you can see it in action: https://codesandbox.io/s/hardcore-bassi-2lwbu

 <button onClick={ this.state.hasBeenFinished ? () => { this.changeTimerStatus(); this.confirmHandler(); } : !this.state.hasDest ? () => { this.changeTimerStatus(); this.takeTaskHandler(); } : this.finishHandler } > Click </button>

As fellow posters have mentioned, you can move all this logic into a single event-handler like so and pair it with the event-listener

handleClick = () => { this.state.hasBeenFinished ? () => { this.changeTimerStatus(); this.confirmHandler(); } : !this.state.hasDest ? () => { this.changeTimerStatus(); this.takeTaskHandler(); } : this.finishHandler }

Then in the button:

<button onClick={this.handleClick}>Click</button>

The benefits of doing this are:

Prevents unnecessary re-renders caused by using anonymous functions as event-handlers during render.
Cleans up your mark-up so its easier to read the logic behind your component.

you can replace this.state.hasDest == false || this.state.hasDest == undefined by !this.state.hasDest
not good practice (avoid new function ref creation in render - forces unnecessary rerendering), not optimal (logic calculation on every render vs only one calculation on demand - within binded handler)

Hayk Aghabekyan · Accepted Answer · 2019-05-26 20:27:44Z

The answer that is accepted here will work, but that is not a good practice to use any logic inside your markup (in this case jsx). I would suggest to create one handler,

class YourComponent extends React.Component { state = { // Whatever you store in the state }; constructor(props) { super(props); this.clickHandler = this.clickHandler.bind(this); } clickHandler() { // this.state // ...logic can go here // it should be the same logic as it is in the accepted answer } render() { return ( <button type="button" onClick={ this.clickHandler }> BUTTON </button> ); } }

Collectives™ on Stack Overflow

Call more than one function 'onClick'

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related