What is the best way to trigger change or input event in react js from jQuery or plain JavaScript

by

For React 16 and React >=15.6

Setter .value= is not working as we wanted because React library overrides input value setter but we can call the function directly on the input as context.

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

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

For textarea element you should use prototype of HTMLTextAreaElement class.

New codepen example.

All credits to this contributor and his solution

Outdated answer only for React <=15.5

With react-dom ^15.6.0 you can use simulated flag on the event object for the event to pass through

var ev = new Event('input', { bubbles: true});
ev.simulated = true;
element.value="Something new";
element.dispatchEvent(ev);

I made a codepen with an example

To understand why new flag is needed I found this comment very helpful:

The input logic in React now dedupe’s change events so they don’t fire
more than once per value. It listens for both browser onChange/onInput
events as well as sets on the DOM node value prop (when you update the
value via javascript). This has the side effect of meaning that if you
update the input’s value manually input.value=”foo” then dispatch a
ChangeEvent with { target: input } React will register both the set
and the event, see it’s value is still `’foo’, consider it a duplicate
event and swallow it.

This works fine in normal cases because a “real” browser initiated
event doesn’t trigger sets on the element.value. You can bail out of
this logic secretly by tagging the event you trigger with a simulated
flag and react will always fire the event.
https://github.com/jquense/react/blob/9a93af4411a8e880bbc05392ccf2b195c97502d1/src/renderers/dom/client/eventPlugins/ChangeEventPlugin.js#L128

More Related Contents:

  1. Why calling react setState method doesn’t mutate the state immediately?
  2. When to use React setState callback
  3. How can I persist redux state tree on refresh?
  4. How to use callback with useState hook in react [duplicate]
  5. ReactJS: Why is passing the component initial state a prop an anti-pattern?
  6. React: Expected an assignment or function call and instead saw an expression
  7. Why, exactly, do we need React.forwardRef?
  8. You should not use outside a
  9. Next.js – Error: only absolute urls are supported
  10. Installing create-react-app gives npm ERR! shasum check failed and npm ERR! Unexpected end of JSON input while parsing near ‘…mojOzGIEI2rg0m24Yb5Oq’
  11. When to use useImperativeHandle, useLayoutEffect, and useDebugValue
  12. How to use comments in React
  13. Visual studio code changes format (React-JSX)
  14. ReactJs CreateClass is not a function
  15. webpack can’t find module if file named jsx
  16. How should I configure create-react-app to serve app from subdirectory?
  17. react routing is able to handle different url path but tomcat returns 404 not available resources
  18. React: Why component’s constructor is called only once?
  19. React and Tailwind CSS: dynamically generated classes are not being applied
  20. Create-React-App Proxy in Production Build
  21. How to generate unique IDs for form labels in React?
  22. how to change jest mock function return value in each test?
  23. What is the expected return of `useEffect` used for?
  24. how to async/await redux-thunk actions?
  25. ReactJS – prevState in the new useState React hook?
  26. You cannot render a inside another . You should never have more than one in your app
  27. React – Is useState ‘s setter function able to change?
  28. How to go back to previous route in react-router-dom v6
  29. Is it possible to return empty in react render function?
  30. How to remove the hash from the url in react-router

Leave a Comment