Categories
React Answers

How to trigger onChange if input value is changing by state with React?

Spread the love

Sometimes, we want to trigger onChange if input value is changing by state with React.

In this article, we’ll look at how to trigger onChange if input value is changing by state with React.

How to trigger onChange if input value is changing by state with React?

To trigger onChange if input value is changing by state with React, we can watch for state change with the useEffect hook.

For instance, we write

const MyInputComponent = () => {
  const [numberValue, setNumberValue] = useState(0);
  const numberInput = useRef(null);

  useEffect(() => {
    numberInput.current.dispatchEvent(
      new Event("change", {
        detail: {
          newValue: numberValue,
        },
        bubbles: true,
        cancelable: true,
      })
    );
  }, [numberValue]);

  return (
    <>
      <input
        type="number"
        value={numberValue}
        ref={numberInput}
        inputMode="numeric"
        onChange={(e) => setNumberValue(e.target.value)}
      />
    </>
  );
};

to add an input that’s bound to the numberValue state with the onChange and value props.

value is set to numberValue to display numberValue as the input value.

onChange is set to (e) => setNumberValue(e.target.value) to set the numberValue state to a value.

Then we call useEffect hook with [numberValue] to call the useEffect callback when the numberValue state changes.

Conclusion

To trigger onChange if input value is changing by state with React, we can watch for state change with the useEffect hook.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.