React中Input子元素获焦时，如何简便修改父元素样式？

你提到原生CSS没有父选择器，用React状态能实现但想找更简单的方法，这里有两个更简便的方案：

1. 纯CSS方案：使用:focus-within伪类 #

这是目前最直接的纯CSS解决方案，:focus-within会匹配包含任意处于聚焦状态子元素的父元素，完全符合你的需求。

修改你的CSS代码即可：

.container:focus-within {
  border: 1px solid blue;
}

你的HTML结构不需要任何改动。这个伪类支持所有现代浏览器（Chrome、Firefox、Safari 10.1+、Edge），如果不需要兼容特别老的浏览器，这是最优解。

2. 原生JS方案：监听聚焦/失焦事件 #

如果需要兼容不支持:focus-within的旧浏览器，用原生JS监听事件比React状态更轻量，不需要维护组件内部状态：

修改后的HTML（给input加id方便选择） #

<div class="container">
  <div class="input__container">
    <input type="text" id="targetInput">
  </div>
</div>

JS代码 #

const input = document.getElementById('targetInput');
const container = document.querySelector('.container');

input.addEventListener('focus', () => container.classList.add('focused'));
input.addEventListener('blur', () => container.classList.remove('focused'));

对应的CSS #

.container.focused {
  border: 1px solid blue;
}

这两个方案都比React状态管理更简便，前者零JS代码，后者仅需几行原生JS，不需要依赖组件状态。

内容的提问来源于stack exchange，提问作者신승구