React JS-如何将焦点放到刚刚单击的元素上？

Question

我有一个小型的React应用，其中包含一些名为InfoBox的组件。每个InfoBox都是用key（对于React），id（对我来说），name，top_pos', left_pos, arings_visibleboolean, and afocusOnRingcallback sent from the parent (the object that instantiates theInfoBoxes) as props to theInfoBox创建的`

它是通过这样的父代码创建的

 <InfoBox
              key={ele.key}
              id={ele.key}
              name={ele.name}
              top_pos={ele.top_pos}
              left_pos={ele.left_pos}
              focusOnRing={this._focusOnRing}
              rings_visible={(focused_ring === ele.key)}
            />

这里是我正在使用的完整src/info_box.js ...

import React from 'react'
import styled from 'styled-components'
import Rings from './rings'

const StyledBlurbBox = styled.div`
  border: solid 1px red;
  width: 10px;
  height: 10px;
  position: absolute;
  margin-left: 45px;
  margin-top: 50px;
  display: hidden;
`

const StyledInfoBox = styled.div`
  text-align: center;
  position: absolute;
  width: 100px;
  height: 100px;
  cursor: pointer;
`

const StyledH1 = styled.h1 `
  font-size: 1.2em;
  width: 100%;
`

export default class InfoBox extends React.Component {
  constructor({blurb}) {
    super()

    this.state = {
      name: (blurb ?  blurb.name : ""),
    }
  }


  render() {
    const top_pos = this.props.top_pos || 100
    const left_pos = this.props.left_pos || 400
    const {name, id, rings_visible, blurb} = this.props


    return (
      <div>
        <StyledInfoBox onClick={() => {this.props.focusOnRing(this.props.id) }}
         style={{top: top_pos + "%", left: left_pos + "%"}}>

          <Rings visible={rings_visible}
                 animation_sequence={['spinning', '']}/>

          <div className="vertical-center-container">
            <StyledH1>
              <button href="#" value={name}>{name}</button>
            </StyledH1>
          </div>
        </StyledInfoBox>


      </div>
    )
  }
}

最好从视觉上解释我的问题，所以我将在屏幕截图中对其进行解释。

我的预期结果是，当我单击InfoBox（恰好是下面的StyledInfoBox）时，它周围出现了一些环（它们是另一个名为Rings的组件）

但是，当我单击时，浏览器（Chrome）在我刚刚单击的内容的文本周围放置了一条令人讨厌的蓝线（可能是按钮？），它看起来像这样：

预期结果是这样，没有蓝线，只有可见的环：

I think我需要做的是拦截事件（在React中是否可能/建议这样做）并模糊（或散焦）此按钮。但我不确定该怎么做。

我在这里了解到React的一个有趣的效果是，当虚拟DOM重新渲染（或变异）真实DOM时，元素将保持其焦点，包括将您聚焦或模糊在DOM中的元素上，在这里看到。

使用React 16.9.0

Answer 1

在该按钮上尝试CSS outline: none吗？

Answer 2

如果您不需要焦点轮廓，则可以使用：

button:focus{
    outline: none;
}