Set React Input Field Value from JavaScript or JQuery

by

Out of all the answers and after a lot of googling, I found this to be working

function changeValue(input,value){

    var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
      window.HTMLInputElement.prototype,
      "value"
    ).set;
    nativeInputValueSetter.call(input, value);

    var inputEvent = new Event("input", { bubbles: true });
    input.dispatchEvent(inputEvent);
}

We are using window.HTMLInputElement.prototype that is HTMLInputElement. An interface that provides special properties and methods for manipulating the options, layout, and presentation of input elements.

Then we will use Object.getOwnPropertyDescriptor() method to set input value. Last we will dispatch change event on the input to simulate with React onChange

Here is a detailed explanation of this answer: https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04

More Related Contents:

  1. ReactJS convert HTML string to JSX
  2. How to use JQuery with ReactJS
  3. What is the right way to use Jquery in React?
  4. what is right way to do API call in react js?
  5. TypeError: Cannot read property ‘setState’ of undefined
  6. ReactJS SyntheticEvent stopPropagation() only works with React events?
  7. How to loop and render elements in React.js without an array of objects to map?
  8. React JS onClick event handler
  9. Get image preview before uploading in React
  10. Jquery in React is not defined
  11. Using JQuery plugins that transform the DOM in React Components?
  12. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  13. how to call javascript/jQuery when javascript is disabled in mozilla/ie? [closed]
  14. Height equal to dynamic width (CSS fluid layout) [duplicate]
  15. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  16. What’s the easiest way to call a function every 5 seconds in jQuery? [duplicate]
  17. Remove items from array with splice in for loop [duplicate]
  18. jQuery: live() vs delegate()
  19. How to call ajax in WordPress
  20. Can I add a key prop to a React fragment?
  21. jQuery: keyup event for mobile device
  22. How to split a string at the first `/` (slash) and surround part of it in a “?
  23. Best way to polyfill ES6 features in React app that uses create-react-app
  24. Using mousedown event on mobile without jQuery mobile?
  25. What does “export default” do in JSX?
  26. Axios – DELETE Request With Request Body and Headers?
  27. Focus tab or window
  28. how to convert xml to json using jquery
  29. reactjs event listener beforeunload added but not removed
  30. Getting max value(s) in JSON array

Leave a Comment