Call multiple functions onClick ReactJS

by

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>

More Related Contents:

  1. What is component in reactjs?
  2. React setState not updating state
  3. Trying to use fetch and pass in mode: no-cors
  4. Rerender view on browser resize with React
  5. React Context vs React Redux, when should I use each one? [closed]
  6. How can I use React hooks in React classic `class` component?
  7. Correct way to push into state array
  8. How do I set multipart in axios with react?
  9. Updating and merging state object using React useState() hook
  10. Why use Redux over Facebook Flux? [closed]
  11. How do I update states `onChange` in an array of object in React Hooks
  12. How to import image (.svg, .png ) in a React Component
  13. Client Routing (using react-router) and Server-Side Routing
  14. How to loop an object in React?
  15. How to update state with usestate in an array of objects?
  16. setTimeout for this.state vs useState
  17. How to print React component on click of a button?
  18. How to render Streamable image on React coming from FastAPI server?
  19. unable to deploy next js to azure
  20. react-router-dom v6 Routes showing blank page
  21. react-router (v4) how to go back?
  22. how to set up an inline svg with webpack
  23. Custom _app and _document get ignored when moving files to src/pages folder in Next.js
  24. Does strict mode work differently with React 18?
  25. How can I dispatch function in redux?
  26. How to parse html to React component?
  27. Exporting functions with reactjs and babel
  28. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  29. State not getting updated when calling the related setState in React
  30. How to get simple dispatch from this.props using connect w/ Redux?

Leave a Comment