CODEWITHSUNDEEP
reactjs
Chris
Chris

Reputation: 6182

React: How to I get a React component button to lose focus?

When I click on a pagination button, the focus state stays in the browser after the page updates. How to I tell that component to blur?

This is where I'm calling the component.

<Paginate onClick={this.handleButtonClick.bind(this)} text="Prev"/>

This is the component.

import React, { Component } from 'react';

class Paginate extends Component {
  render() {
    const {text} = this.props;

    return(
      <button onClick={this.props.onClick}>{text}</button>
    )
  }
}

export default Paginate;

Upvotes: 19

Views: 42829

Answers (2)

ThePrancingPony
ThePrancingPony

Reputation: 351

Adding to mrossman's comment in the accepted answer, what worked for me was onClick={(e) => e.currentTarget.blur()}.

Upvotes: 22

Ross Khanas
Ross Khanas

Reputation: 1501

You need to use React ref API. When the button is mounted, you sent the reference to its DOM element locally and when you click, you call blur DOM API.

Check the example here: http://jsfiddle.net/rtkhanas/af3eau1a/55/

Upvotes: 13

Related Questions