如何删除反应中显示的 onClick 组件边框？

【问题标题】：How do I remove the component border shown onClick in react?如何删除反应中显示的 onClick 组件边框？
【发布时间】：2020-10-02 04:16:13
【问题描述】：

每当我点击任何组件时，我都会看到黑色边框，尽管当我点击离开时，边框会消失。如何防止 Web 应用程序这样做？下面是我在应用中获得的图片。

【问题讨论】：

【解决方案1】：

这是因为:focus pseudo-class 正在将outline 添加到按钮中。您可以像这样使用 css 来改变这种行为：

button:focus {
  outline: none;
}

或者也可以将其添加为内联样式，尽管我个人不建议这样做，因为有很多内联样式可能会导致 HTML 变得混乱且难以阅读。

【讨论】：

【解决方案2】：

这是由&focus css 选择器引起的，如检查器所示。

将outline: none 添加到<button> 以将其删除；

<button style={{outline: 'none'}} onClick={onInputSubmit}>

【讨论】：