javascript - 焦点样式在 React 组件中无法正常工作？

Question

问题:

我已经创建了一个 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>

这是我的 CSS 样式。

.search-box-icon {
  margin-left: 1%;
}

.search-input {
  border: none;
}

.search-input:focus {
  outline: none;
}

.search-box:focus {
  outline-color: #53c9fc;
  outline-width: 2px;
}

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

Answer 1

如果没有 tabindex，您将无法使用 css/html 执行此操作并根据 MDN :

Avoid using the tabindex attribute in conjunction with non-interactive content to make something intended to be interactive focusable by keyboard input. An example of this would be using an <div> element to describe a button, instead of the <button> element.

and w3 says:

The content should be semantically described using interactive elements (<a>, <button>, <details>, <input>, <select>, <textarea>, etc.) instead.

所以最好的做法是使用 addEventListener()在 JavaScript , 但是如果你想使用 tabindex不要忘记添加 tabindex到内部 html 内容。

另一种解决方案

您不必使用 tabindex如果您只想更改 div边界。你可以使用 :focus-within只需更改边框即可。

.search-box {
  margin-left: 1%;
  outline: red;
  border: 1px solid #fc3;
}

.search-input {
  border: none;
}

.search-input:focus {
  outline: none;
}

.search-box:focus-within {
  border: 2px solid #53c9fc;
}

<div class="search-box">
  <Row>
    <div class="search-box-icon">
    </div>
    <input
      class="search-input"
      placeholder="search in listbox"
    />
  </Row>
</div>