【问题标题】: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 =&gt; e.target.blur()}
    【解决方案2】:

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

    【讨论】:

    • 在我的情况下有效,已通过 ant-design Button 验证。 e.target.blur() 的解决方案在那里工作。
    • 这对我有用。通过按钮的 onClick 函数传递 e。然后在 onClick 函数的声明中添加 e.currentTarget.blur()。
    猜你喜欢
    • 2018-08-07
    • 2020-06-06
    • 1970-01-01
    • 2015-07-05
    • 1970-01-01
    • 2013-06-13
    • 1970-01-01
    • 2021-01-06
    • 2019-01-23
    相关资源
    最近更新 更多