React：如何让 React 组件按钮失去焦点？答案

【问题标题】：React: How to I get a React component button to lose focus?React：如何让 React 组件按钮失去焦点？
【发布时间】：2016-06-27 00:38:47
【问题描述】：

当我点击分页按钮时，焦点状态会在页面更新后停留在浏览器中。如何让该组件模糊？

这是我调用组件的地方。

<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;

【问题讨论】：

标签： reactjs

【解决方案1】：

你需要使用 React ref API。当按钮被挂载时，你在本地发送了对其 DOM 元素的引用，当你点击时，你调用blur DOM API。

在此处查看示例： http://jsfiddle.net/rtkhanas/af3eau1a/55/

【讨论】：

你不需要ref的额外复杂性，你已经通过点击事件获得了对DOM元素的引用。 onClick={e => e.target.blur()}

【解决方案2】：

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

【讨论】：

在我的情况下有效，已通过 ant-design Button 验证。 e.target.blur() 的解决方案不在那里工作。
这对我有用。通过按钮的 onClick 函数传递 e。然后在 onClick 函数的声明中添加 e.currentTarget.blur()。