Javascript 焦点样式在react组件中工作不正常？

问题：

我已经在那里创建了一个react应用程序，我正在创建一个自定义搜索框

<div className="search-box">
  <Row>
    <div className="search-box-icon">
      <i className="fas fa-search" />
    </div>
    <input
      className="search-input"
      placeholder="search in listbox"
    />
  </Row>
</div>

---

我需要做的是，当有人开始在文本框中键入内容时，在搜索框div中添加一个大纲。我所做的事情似乎不是工作。有人能帮我解决这个问题吗？谢谢。

如果没有

tabindex

，您就无法专注于

div

标记

<div 
  className="search-box" 
  tabIndex="1" // add this line
>
  ...
</div>

...

如果没有

tabindex

并根据以下条件，使用css/html无法完成此操作：

避免将

tabindex

属性与非交互式内容结合使用，通过键盘输入使交互式内容可聚焦。例如，使用

元素来描述按钮，而不是

元素

应该使用交互元素（

，

，

，

，

，

，

，等等）对内容进行语义描述

因此，这方面的最佳实践是在

JavaScript

中使用

addEventListener（）

，但是如果您想使用

tabindex

不要忘记将

tabindex

添加到内部html内容中

另一个解决方案 如果只想更改

div

边框，则不必使用

tabindex

。 您可以在中使用

：焦点，只需更改边框即可


。搜索框{
左缘：1%；
轮廓：红色；
边框：1px实心#fc3；
}
.搜索输入{
边界：无；
}
.搜索输入：焦点{
大纲：无；
}
.搜索框：焦点在{
边框：2个实心#53c9fc；
}

你的代码可以正常工作。你能分享你的组件吗？这是沙盒，可能是@dwp的复制品，别提了；）@dwp这不是一个很好的做法，它破坏了可访问性，请检查我的答案
<div 
  className="search-box" 
  tabIndex="1" // add this line
>
  ...
</div>