Call Multiple Functions Onclick Reactjs

Call multiple functions onClick ReactJS

Wrap your two+ function calls in another function/method. Here are a couple variants of that idea:

1) Separate method

var Test = React.createClass({
   onClick: function(event){
      func1();
      func2();
   },
   render: function(){
      return (
         <a href="#" onClick={this.onClick}>Test Link</a>
      );
   }
});

or with ES6 classes:

class Test extends React.Component {
   onClick(event) {
      func1();
      func2();
   }
   render() {
      return (
         <a href="#" onClick={this.onClick}>Test Link</a>
      );
   }
}

2) Inline

<a href="#" onClick={function(event){ func1(); func2()}}>Test Link</a>

or ES6 equivalent:

<a href="#" onClick={() => { func1(); func2();}}>Test Link</a>

How to Call multiple functions in one onClick in React?

If you want to update your values, you have to cause a render by updating a state, maybe be doing this way

export default function App(){

func1(){
 // some func
//brings random number
}

func2(){
 // some func
//brings random number
}

func3(){
 // some func
//brings random number
}

const obj = () => ({
    definedOne: func1(),
    definedTwo: func2(),
    definedThree: func3()
})

const [state, setState] = useState(obj())

return(
 <div>{state.definedOne}<div>
 <div>{state.definedTwo}<div>
 <div>{state.definedTree}<div>
<button onClick={() => {
    setState({...obj()})
}}>Run Functions Again</button>
)

}

How to call two arrow functions onclick ReactJS

Either you can create an inline arrow function which calls the both

<MenuItem onClick={(e) => {handleModalOpen(); handleClose(e); }}>Add Album</MenuItem>

Or you can create a function outside and pass its reference

handleClick = (e) => {
  handleModalOpen(); 
  handleClose(e);
}

<MenuItem onClick={handleClick}>Add Album</MenuItem>

Multiple function in onClick event

Wrap the function or statement you want to execute after handleChange() inside setTimeout with 0 milliseconds. This will make sure the function or statement gets executed after all the synchronous tasks are finished executing (in this case handleChange()).

const onSubmit = () => {
  handleChange();
  setTimeout(() => {
    alert("Default notification");   // or any other function or statement you want to execute after handleChange().
  }, 0);
};

How to call multiple functions on the same onClick event ReactJS

Write it like this:

onClick={() => {
   handleProjectSelection(project);
   anotherfunctionCall();
}}

Or create a single function, use that as a click handler. Inside that function call other two functions, Like this:

onClick={this.handleClick}

handleClick(){
   function1();
   function2();
}

---

See there are two ways of using arrow function:

1- Concise Body: () => /*single expression*/

2- Block Body: () => {}

In block body inside {} (body of the function), we can perform any number of task.

Like this:

onClick={() => {
   fun1();
   fun2();
   fun3();
   fun4();
   ....
   funN();
}}

In React, how to call multiple functions with their own arguments?

Second function isn't working, because you not actually calling function using bind, you just binding scope for future function calls. If you want to call function with specified scope, use call or apply

More about them:
https://stackoverflow.com/a/15455043/5709697

EDIT

For your case you can call second function like so:

onClick={(e) => {f1(e); f2.call(this, e)}}

Link to sandbox:
https://codesandbox.io/s/509o1lxjp

How to call more than one function in javascript onclick event?

I think you must wrap the content of the arrow function in { }, like this

<Button onClick={(e) => {setId(_id); handleDelete()} }>Delete</Button>

and don't forget the closing tag for the Button component

I hope that solves your problem.

Multiple functions inside onClick with a ternary and reference

You can move the ternary/branching logic into a single callback function.

<button
  onClick={() => {
    if (!isRecording) {
      modalPortal.current.open();
      beginRecording();
    } else {
      endRecording();
    }
  }
>
  ...
</button>

If you want to continue using the ternary though you need to also invoke the beginRecording function. The idea is similar here, based on the condition, return an anonymous function that does a couple things, or return a function reference that does whatever it does.

<button
  onClick={!isRecording 
    ? () => {
        modalPortal.current.open();
        beginRecording(); // <-- also invoke
      } 
    : endRecording
  } 
>
  ... 
</button>

Putting two functions in the same onclick

There is no use of just putting a function reference and not using it

onClick={(ev) => {
                  ev.stopPropagation();
                  handleClick;
                  dispatch(approveUser(row.original.id));
                }}

You should invoke the function by putting () at the end of the handleClick as:

onClick={(ev) => {
                  ev.stopPropagation();
                  handleClick(ev);    // INVOCATION
                  dispatch(approveUser(row.original.id));
                }}

---

This is just personal preference

You are handling onClick inline and trying to invoke the function handleClick, so It would be much cleaner if you could just set the state of Open inside the handler.

setOpen(true);

Below code is much more readable

onClick={(ev) => {
  ev.stopPropagation();
  setOpen(true);   
  dispatch(approveUser(row.original.id));
}}

---

Related Topics