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 ref API。当挂载按钮时，您在本地发送了对其DOM元素的引用，当您单击时，您调用blur DOM API。

点击此处查看示例： http://jsfiddle.net/rtkhanas/af3eau1a/

Answer 2

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

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

2 个答案: