Category: JavaScript

Sometimes, we want to correctly catch change or focusOut event on text input in React.

In this article, we’ll look at how to correctly catch change or focusOut event on text input in React.

How to correctly catch change or focusOut event on text input in React?

To correctly catch change or focusOut event on text input in React, we can watch the blur event.

For instance, we write

function Example() {
  return (
    <input
      onBlur={(e) => {
        console.log("Triggered because this input lost focus");
      }}
      placeholder="onBlur"
    />
  );
}

to add an input into the Example component.

We set its onBlur prop to a function that’s called when we move our focus away from the input.

Conclusion

To correctly catch change or focusOut event on text input in React, we can watch the blur event.

To go back to the previous route with React Route v4, we can use the history.goBack method.

For instance, we write

//...
import { withRouter } from "react-router-dom";

class Demo extends Component {
  //...
  constructor(props) {
    super(props);
    this.goBack = this.goBack.bind(this);
  }

  goBack() {
    this.props.history.goBack();
  }
  //...
}

export default withRouter(Demo);

to call the this.props.history.goBack method in goBack.

We get the method because we call withRouter with Demo to inject the history prop into the Demo component.

We call this.props.history.goBack method to go back to the previous route.

Sometimes, we want to select all text in input with React when it focused.

In this article, we’ll look at how to select all text in input with React when it focused.

How to select all text in input with React when it focused?

To select all text in input with React when it focused, we can call select on the input element to select the input value when the element is in focus.

For instance, we write

const Comp = () => {
  //...
  const inputEl = useRef(null);

  const handleFocus = () => {
    inputEl.current.select();
  };

  <input
    type="number"
    value={quantity}
    ref={inputEl}
    onChange={(e) => setQuantityHandler(e.target.value)}
    onFocus={handleFocus}
  />;
};

to assign the inputEl ref to the input.

Then we set the onFocus prop to the handleFocus function, which runs when we focus on the input.

In handleFocus, we call inputEl.current.select to select all the input value text in the input box.

Conclusion

To select all text in input with React when it focused, we can call select on the input element to select the input value when the element is in focus.