React点击按钮添加输入框后，如何自动聚焦最新输入框并设红边框？

核心思路很直接：在新增输入框的逻辑完成后，主动调用输入框元素的focus()方法，就能让最后添加的输入框自动获取焦点，同时你已实现的:focus-within CSS效果也会正常触发。

原生JS场景示例 #

假设你的输入框都放在类名为input-container的容器里，按钮点击事件可以这么写：

document.querySelector('#add-input-btn').addEventListener('click', () => {
  const container = document.querySelector('.input-container');
  // 创建新输入框并设置属性
  const newInput = document.createElement('input');
  newInput.type = 'text';
  // 将新输入框插入DOM
  container.appendChild(newInput);
  // 关键步骤：让新输入框获取焦点
  newInput.focus();
});

框架场景补充（以React为例） #

如果用React开发，需要借助useRef获取DOM引用，确保在DOM更新后执行聚焦操作：

import { useRef } from 'react';

function InputList() {
  const containerRef = useRef(null);

  const handleAddInput = () => {
    const newInput = document.createElement('input');
    newInput.type = 'text';
    containerRef.current.appendChild(newInput);
    newInput.focus();
  };

  return (
    <div>
      <div ref={containerRef} className="input-container"></div>
      <button onClick={handleAddInput}>新增输入框</button>
    </div>
  );
}

关键说明 #

:focus-within是监听容器内元素的聚焦状态，但浏览器不会自动给新增的DOM元素分配焦点，必须通过代码主动调用focus()方法，才能激活聚焦状态，进而触发:focus-within的样式效果。

内容的提问来源于stack exchange，提问作者xowiya10