ReactJs: Prevent multiple times button press

by

The solution is to check the state immediately upon entry to the handler. React guarantees that setState inside interactive events (such as click) is flushed at browser event boundary. Ref: https://github.com/facebook/react/issues/11171#issuecomment-357945371

// In constructor
this.state = {
    disabled : false
};


// Handler for on click
handleClick = (event) => {
    if (this.state.disabled) {
        return;
    }
    this.setState({disabled: true});
    // Send     
}

// In render
<button onClick={this.handleClick} disabled={this.state.disabled} ...>
    {this.state.disabled ? 'Sending...' : 'Send'}
<button>

More Related Contents:

  1. What is component in reactjs?
  2. Call child method from parent
  3. Window is not defined in Next.js React app
  4. React Context vs React Redux, when should I use each one? [closed]
  5. Correct way to push into state array
  6. React JS – Uncaught TypeError: this.props.data.map is not a function
  7. Pass react component as props
  8. How to register event with useEffect hooks?
  9. Is there a generic way to set state in React Hooks? How to manage multiple states?
  10. React Function Components with hooks vs Class Components
  11. Can I execute a function after setState is finished updating?
  12. where is create-react-app webpack config and files?
  13. Importing multiple files in react
  14. Is there a way to use leaflet.heat in react?
  15. onEnter not called in React-Router
  16. How to render Streamable image on React coming from FastAPI server?
  17. Determine which dependency array variable caused useEffect hook to fire
  18. unable to deploy next js to azure
  19. What does “export default” do in JSX?
  20. Axios – DELETE Request With Request Body and Headers?
  21. Updating state to the same state directly in the component body
  22. how to set up an inline svg with webpack
  23. Jest – SyntaxError: Cannot use import statement outside a module
  24. Does strict mode work differently with React 18?
  25. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  26. Only numbers. Input number in React
  27. Disable chrome react DevTools for production
  28. You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”
  29. How can I redirect in React Router v6?
  30. React props: Should I pass the object or its properties? Does it make much difference?

Leave a Comment