React 防止点击时获得焦点

Question

我在我的页面上有一组选项卡，当点击时，将活动选项卡切换为所点击选项卡的值。这个功能运行良好，但是当我看到新的活动选项卡周围有一个大蓝色焦点框时，感觉不太舒服。有没有一种React-y的方法可以防止这种情况发生？

使用onMouseDown={this.someMethod}并在方法中插入preventDefault()是否可行？

- Fred Chapman

---

为什么要阻止焦点？难道您不希望您的网站易于访问吗？如果只是为了美观，您可以使用CSS来更改样式。 - Felix Kling

我差不多想要改变焦点的样式:/ - Fred Chapman

Answer 1

逻辑没问题，但设计让你遇到了问题？这种情况下，一些CSS应该能解决问题。

如果你有一个导航栏，CSS应该是这样的：

 .navbar-inverse .navbar-brand:focus {
  background-color : red; //Just add the properties you want here
}

如果您只需右键单击并检查元素，浏览器就会告诉您有关CSS处理选项卡焦点的详细信息。

- Theo

---

我想要实现的是，当你点击导航项时，不允许出现蓝色焦点边框（在Chrome上）。由于间距很小，导航项紧挨着彼此排列，焦点“边框”会溢出到其他导航项上。 - Fred Chapman

在这种情况下，只需添加处理焦点的CSS。 - Theo

@FredChapman：然后设置 outline: none。 - Felix Kling