React:如何让React组件按钮失去焦点？

Question

当我单击分页按钮时,焦点状态会在页面更新后保留在浏览器中.如何告诉该组件模糊？

这是我调用组件的地方.

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

这是组件.

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;

Answer 1

您需要使用React refAPI.当挂载按钮时,您在本地发送了对其DOM元素的引用,当您单击时,您调用blurDOM API.

查看此处的示例:http: //jsfiddle.net/rtkhanas/af3eau1a/

Answer 2

在接受的答案中添加 mrossman 的评论，对我有用的是onClick={(e) => e.currentTarget.blur()}.