In React ES6, why does the input field lose focus after typing a character?

by

it is because you are rendering the form in a function inside render().

Every time your state/prop change, the function returns a new form. it caused you to lose focus.

Try putting what’s inside the function into your render directly.

<main id="main" role="main">
    <div className="container-fluid">
        <FormPostSingle />
    </div>
</main>

===>

<main id="main" role="main">
    <div className="container-fluid">
        <form onSubmit={onSubmit}>
            <InputText name="title" label="Title" placeholder="Enter a title" onChange={onChange} value={valueTitle} />
            <InputSubmit name="Save" />
        </form>
    </div>
</main>

More Related Contents:

  1. Uncaught TypeError: Cannot read property ‘state or props’ of undefined
  2. What’s the difference between “super()” and “super(props)” in React when using es6 classes?
  3. Dynamically import images from a directory using webpack
  4. Programmatically navigate using react router V4
  5. ReactJS giving error Uncaught TypeError: Super expression must either be null or a function, not undefined
  6. mobx-react observer don’t fires when I set observable
  7. Differences between creating a new class to using export const
  8. How to import and export components using React + ES6 + webpack?
  9. Updating React state when state is an array of objects
  10. How to tell webpack dev server to serve index.html for any route
  11. Unexpected block statement surrounding arrow body
  12. ReactJS with ES6: this.props is not a function when I communicate two components
  13. Value of “this” is incorrect when debugging Babel transpiled React with Chrome Devtools
  14. React: Which is recommended arrow or normal function?
  15. Difference between import React and import { Component } syntax [duplicate]
  16. How to assign the correct typing to React.cloneElement when giving properties to children?
  17. What is the expected return of `useEffect` used for?
  18. Property ‘value’ does not exist on type ‘never’. when use useRef hook in mui
  19. Put A Warning If Page Refresh in ReactJS
  20. How to make Jest wait for all asynchronous code to finish execution before expecting an assertion
  21. React: onClick handler is getting called on every render?
  22. Attach Authorization header for all axios requests
  23. Set loading state before and after an action in a React class component
  24. How can I reset a react component including all transitively reachable state?
  25. How to use the increment operator in React
  26. React Hooks: how to wait for the data to be fetched before rendering
  27. Get form data in React
  28. Media queries in MUI components
  29. React with Typescript — Generics while using React.forwardRef
  30. Passing values through React-Router v4

Leave a Comment