焦点样式在反应组件中无法正常工作？

Posted 2023-02-22

【中文标题】焦点样式在反应组件中无法正常工作？

【英文标题】：Focus styling is not working correctly in a react component?

【发布时间】：2019-07-31 20:54:31

【问题描述】：

问题：

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

<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 添加一个大纲。我所做的事情似乎并不奏效。有人可以帮我解决这个问题吗？谢谢。

【问题讨论】：

你的代码有效。你能分享你的组件吗。这是工作沙箱codesandbox.io/s/ykrn4883kx

Using :focus to style outer div?的可能重复

【参考方案1】：

如果没有tabindex，您将无法专注于div 标签。

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

【讨论】：

@dwp 别提了 ;)

@dwp 这不是一个好的做法，它破坏了可访问性，请查看我的答案***.com/a/55087153/5721245

【参考方案2】：

如果没有tabindex 和MDN，您将无法使用css/html 执行此操作：

避免将tabindex 属性与非交互式内容结合使用，以使旨在通过键盘输入成为交互式焦点的内容。例如，使用 <div> 元素来描述按钮，而不是 <button> 元素。

and w3 says:

内容应使用交互元素（<a>、<button>、<details>、<input>、<select>、<textarea> 等）进行语义描述。

因此，最好的做法是在javascript 中使用addEventListener()，但如果您想使用tabindex，请不要忘记将tabindex 添加到内部html 内容中。

另一种解决方案

如果您只想更改div 边框，则不必使用tabindex。 您可以使用 :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>